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run on servers 


The process 
of writing 


CONTENT NOUNS 


<p></p> 
HTML means "paragraph” 


VERBS 
B ^ 
p.hide(); 
means "hide the 
paragraph" 
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WATCH BEFORE YOU START! 


HTML 


Q If this is your first time ever writing code, please don’t get overwhelmed. It’s 100% normal that you will 
not understand everything at the beginning. Just don't think “I guess coding is not for me”! 


YOU CAN DO IT * 


a Y 


pt A D 
4 (WE KNOW YOU GAN 


ġa You need to code along with mel You will learn ZERO HTML and CSS skills by just sitting and watching me 
code. You really have to write code YOURSELF! 


i 


zoTmmmmmmmm 


If you want the course material to stick, take notes. Notes on code syntax, notes on theory concepts 


notes on everything! 
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eo Try all the coding challenges! Try to do your best, but if you get stuck for too long, watch the solution. 


Don't beat yourself up if you can't figure it out! Just rewatch the lectures that were covered in the 
challenge, try to understand them better, and move on. 


> Watch for this sign! 


PAUSE THE VIDEO 
FOR CHALLENGE 


FAI 


Before moving on from a section, make sure that you understand exactly what was covered. Take a 


break, review the code we wrote, review your notes, review the projects we built, and maybe even write 
some code yourself. 
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17 If you have an error or a question, start by trying to solve it yourself! This is essential for your progress. If 


you can't solve it, check the Q&A section. If that doesn't help, you can ask a new question. Use a short 
description, and post code on codepen.io. 


C®BDEPEN 


Q Overview Q&A Bookmarks Announcements 


2 — > Search all course questions a 


All lectures v Sort by most recent v Filter questions v 


P 17788 questions in this course Ask a new question A 3 


- | recorded this course on a Mac, but everything works the exact same way on Windows or Linux. If 


something doesn't work on your computer, its NOT because youre using a different OS. 


ws Most importantly, have fun! It's so rewarding to see something that YOU have built YOURSELF! So if you're 
feeling frustrated, stop whatever you're doing, and come back later! 


y And | mean REAL fun @ 
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HTML 


& HyperText Markup Language 


< HTML is a markup language that web developers use to structure and 
describe the content of a webpage (not a programming language) 


< HTML consists of elements that describe different types of content: 
paragraphs, links, headings, images, video, etc. 


< Web browsers understand HTML and render HTML code as websites 


A healthy meal 
delivered to your door, 
every single day 


< Element 


| 


<p>HTML is a markup language</p> 
AAA | eee 


< Opening tag: Name 
of the element, 
wrapped in < and > 


< Content: Content of the element, in 
this example text. But it might be 
another element (child element). Some 
elements have no content (e.g. <img>) 


Z- Closing tag: Same as 
opening tag, but with 
a /. When element has 
no content, it's omitted 


SECTION 03 — 
CSS FUNDAMENTALS 


SECTION 
CSS FUNDAMENTALS 


LECTURE 
INTRODUCTION TO CSS 


HTML 


< Cascading Style Sheets 
< CSS describes the visual style and presentation of the content 


written in HTML 
& CSS consists of countless properties that developers use to format 
the content: properties about font, text, spacing, layout, etc. 
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Selector Declaration block 
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Declaration / Style 


Property Value 
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THE RGB MODEL 


R G B 
255 O O 
< RGB Model: Every color can 
be represented by a R G B R G B 
combination of RED, GREEN 255 255 O 255 O 255 
and BLUE 
< Each of the 3 base colors 
can take a vena between O R G B R G E 
and 255, which leads to 16.8 255 255 255 O 0 0 
million different colors 
0  |——É 255 
0 Ep E R GB R G B 
O O 255 


o MMe 7 7^ 


R G B 
O 255255 


e RGB / RGBA NOTATION a HEXADECIMAL NOTATION 


«< Regular RGB model © Instead of using a scale from O to 255, we go 


rgb(0, 255, 255) EW 


< RGB with transparency (“alpha”) 


from O to ff (255 in hexadecimal numbers) 


© Shorthand, when all colors are identical pairs 
sore IT 


In practice, we mostly use hexadecimal 


rgba(0, 255, 255, 0.3) 


C) 


#f4b33f colors, and rgba when we need transparency 


rgb(244, 179, 63) rgba(244, 179, 63, 0.7) 


S- Color picker in VS Code 


< When colors in all 3 
channels are the same, 
we get a grey color 


G- There are 256 pure 
grays to choose from 


rgb(0, 0, 0) / #000000 / #000 m 


rgb(69, 69, 69) / #444444 / #444 m 


rgb(183, 183, 183) / #b7b7b7 


rgb(255, 255, 255) / #ffffff / #fff 
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CSS THEORY #1: CONFLICTS 
BETWEEN SELECTORS 


HTML 


CONFLICTING SELECTORS AND DECLARATIONS 


‚author { 
font-style: 
font-size: 18px; 


<p 1d="author-text_ ="author"> 


Posteo 7) V a Jones o rer UPS 21st 2827 
</ D > 


#author-text 1 
=) There are multiple selectors selecting the font-size: 20px; 
same element. Which one of them applies? 


All of them. All rules and properties are applied! D, 
ti { 


y font-family: 


color: LIH444444; 


font-size: 22px; 
2) But there are conflicting font-size } 


declarations! Is it 18px, or 20px, or 22px? 


Let's see how it works... 


enn 
QQ 


RESOLVING CONFLICTING DECLARATIONS 


Highest 
priority 


Lowest 
priority 


Declarations marked ! important 
l No important! ? 
Inline style (style attribute in HTML) 


l No inline style? 
< Last selector in 
code applies * 


l No # selector? Y, 
Class (.) or pseudo-class (:) selector 


Multiple? 


ID (4) selector Multiple? 


l No . or : selector? 
Element selector (p, div, li, etc.) | 
Multiple? 


l No element selector? 


Universal selector (x) 


* It's a bit more complicated in reality 


DU 


‚author 4 
font-style: 
font-size: 18 


#author-text 4 


font-size: 20 


1 
font-family: 
color: LIH444444; 
font-size: 22 


^ There is an ID selector 


(#author-text), so forthe 
conflicting font-size property, 
this is the selector that applies 
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CSS THEORY £2: INHERITANCE 
AND IHE UNIVERSAL SELECTOR 


HTML —- 


HOW INHERITANCE WORKS 


body 1 
color: (11444444; 
color: LIH444444; font-size: 16px; 
font-size: 16px; font-family: 
is ithe navigation | font-family: | 


«/ naX» border-top: 10px [(141098ad ; 


} 
<h1>My website</h1> 


font-family: 


<p> 
The text is this paragraph 


i : color: LIH444444; 
is completely irrelevant ® 


HE Vote C2708 ee color: MEAN; | OVERRIDING 
NP font-family: 7 font-size: 32px; | INHERITED STY 


text-transform: 
</ body> } 


Not all properties get inherited. It’s mostly ones related to text: font-family, font-size, font-weight, font- 
style, color, Line-height, letter-spacing, text-align, text-transform, text-shadow, List-style, etc. 
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CSS THEORY #3: THE CSS BOX 
MODEL 


HTML 


Visible part of element on the page 


margin < Content: Text, images, etc. 


padding < Border: A line around the element, 
still inside of the element 
< Padding: Invisible space around the 
content, inside of the element 


height 


& Margin: Space outside of the 
element, between elements 


CONTENT 


FILL AREA < Fill area: Area that gets filled with 


background color or background 
image 


border 


ANALOGY FOR THE CSS BOX MODEL 


border 


Content area 


margin 


padding 


Final element width = left border + left padding + 
width + right padding + right border 


| padding 


Final element height = top border + top padding 
+ height + bottom padding + bottom border 


heir 


CONTENT 


border 


< We can specify all these values using CSS properties 


< This is the default behavior, but we can changeit | . — — ----------------------------------- 
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CS) IHEORH Aa PIO 
BOXES 


HTML 


The Basic Language of the Web: HTML 


Posted by Laura Jones on Monday, June 21st 2027 


< Elements are formatted visually as blocks 


< Elements occupy 100% of parent element's width, 


<div class="fes7-im 


no Matter the content — 


containel 


< Elements are stacked vertically by default, one 
after another 


All modern websites and web applications are built using three fundamental 
echnologies: HTML, CSS and JavaScript. These are the languages of the web. 


< [he box-model applies as showed earlier In this post, let's focus on HTML. We will learn what HTML is all about, and why 


should learn it. 


What is HTML? 


Default elements: body, main, header, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam recusandae 
reprehenderit vitae ratione veritatis corrupti sit ut vero, dolores nulla 
exercitationem eos quod iusto incidunt, perferendis alias tenetur. Est, vel! 


footer, section, nav, aside, div, hl-h6, 


p, ul, ol, li, etc. 


With CSS: display: block 


3. |T he actual element 


You can learn more at the MDN Web Docs. 


< Occupies only the space necessary for its content 


& Causes no line-breaks after or before the element 


© Box model applies in a different way: heights and 
widths do not apply 


< Paddings and margins are applied only 
horizontally (left and right) 


Default elements: a, img, strong, em, 
button, etc. 


With CSS: display: inline 


The Basic Language of the Web: HTML 


g ` 
P y 1 
= 
"a 4 


Posted by [Laura Jones on Monday. June 21st 2027 


All modern websites and web applications are built using three 
technologies: HTML, CSS and JavaScript. These are the languages of the web. 


In this post, let's focus on HTML. We will learn what HTML is all about, and why 
should learn it. 


What is HTML? 


Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam recusandae 
reprehenderit vitae ratione veritatis corrupti sit ut vero, dolores nulla 
exercitationem eos quod iusto incidunt, perferendis alias tenetur. Est, vel! 


In HTML, each element is made up of 3 parts: 


1. The opening tag 
2. The closing tag 


3. The actual element 


You can learn more at the IMDN Web Docs). 


Elements formatted visually as d- 
blocks 


100% of parent’s width 

" 
Vertically, one after another 

" 


Box-model applies as showed —y 
f 


Looks like inline from the 


outside, behaves like block- 
level on the inside 


Occupies oniv content's space 


Causes no line-breaks 


Box-model applies as showed 


display: inline-block 


Occupies only content's space 


Causes no line-breaks 


Box model is different: heights 
and widths do not apply 


Paddings and margins only 
horizontal (left and right) 
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CSS THEORY #5: ABSOLUTE 
POSITIONING 


HTML 


Default positioning 


Element is “in flow” 


Elements are simply laid out 
according to their order in the 
HTML code 


Default positioning 


position: relative 


& Element is removed from the 


normal flow: “out of flow” 


No impact on surrounding 
elements, might overlap them 


< We use top, bottom, left, or 


right to offset the element 
from its relatively positioned 
container 


position: absolute 


100px 


200px 


.container 4 
position: relative; 
background-color: #f7e6c1; 
j 
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CSS GRID FUNDAMENTALS 


LECTURE 


THE 3 WAYS OF BUILDING 
LAYOUTS 


HTML ESS 


< Layout is the way text, images and other 
content is placed and arranged on a webpage 


< Layout gives the page a visual structure, into 
which we place our content 


< Building a layout: arranging page elements 
into a visual structure, instead of simply having 
them placed one after another (normal flow) 


to buy furniture 


Find furniture for every 


type of project 


Platform v For v Proects B»o a deno co Login 


The new way for 
interior professionals 
to buy furniture 


co —- indo ' 


Find furniture for every 
type of project 


= 059+ brands 
-s 


the words 
nadine brands 
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th the Cio Toel 


We work with... 
Interior designers 


"x: 


| 


Iw Sio Restaurar, Lericon br Nros 


[#3] [650+ brands) [® ] [Trade pricing ——— ] 


See trade pricing and lead times 


right away. No need to request 


items from any website with the 
Clip Tool. 


FLOAT LAYOUTS 


The old way of building 
layouts of all sizes, using the 
float CSS property. Still used, 
but getting outdated fast. 


FLEXBOX 


Modern way of laying out 
elements in a 1-dimensional 
row without using floats. 


Perfect for component layouts. 


CSS GRID 


For laying out element in a 
fully-fledged 2-dimensional 
grid. Perfect for page layouts 
and complex components. 
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HTML ESS 


Default positioning 


Element is “in flow” 


Elements are simply laid out 
according to their order in the 
HTML code 


Default positioning 


position: relative 


& Element is removed from the 


normal flow: “out of flow” 


No impact on surrounding 
elements, might overlap them 


< We use top, bottom, left, or 


right to offset the element 
from its relatively positioned 
container 


position: absolute 


E 


& Element is removed from the 


normal flow: "out of flow" 


& Text and inline elements will 
wrap around the floated 
element 


< The container will not adjust its 
height to the element 


float: left 
float: right 
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HTML ESS 


margin 


| - m 


margin 


| padding 


box-sizing: border-box 


height height 


CONTENT CONTENT 


border border 


Final element width = right-eerder + rightpectding lefrpaediñg + Te er 
Final element height = top-berder + top-paeding bottorms-gadding + bottum-aurder 
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Flexbox is a set of related CSS properties for building 1-dimensional layouts 


The main idea behind flexbox is that empty space inside a container element 
can be automatically divided by its child elements 


Flexbox makes it easy to automatically align items to one another inside a 
parent container, both horizontally and vertically 


Flexbox solves common problems such as vertical centering and creating 
equal-height columns 


Flexbox is perfect for replacing floats, allowing us to write fewer and cleaner 
HTML and CSS code 


Flex items Flex container 


MAIN AXIS 


CROSS AXIS 


display: flex 


gap: © | <length> 


< To create space between items, without using margin 


justify-content: flex-start | flex-end | center | 
space-between | space-around | space-evenly 


< To align items along main axis (horizontally, by default) 


align-items: stretch | flex-start | flex-end | 


center | baseline 


& To align items along cross axis (vertically, by default) 


flex-direction: row | row-reverse | column | 


column-reverse 


£ To define which is the main axis 


flex-wrap: nowrap | wrap | wrap-reverse 


< To allow items to wrap into a new line if they are too large 


align-content: stretch | flex-start | flex-end | 
center | space-between | space-around 


& Only applies when there are multiple lines (flex-wrap: wrap) 


CROSS AXIS 


MAIN AXIS 


align-self: auto | stretch | flex-start | flex- 
end | center | baseline 


< To overwrite aL ign- items for individual flex items 


flex-grow: © | «integer» 


< To allow an element to grow (0 means no, 1+ means yes) 


flex-shrink: 1 | «integer» 


& To allow an element to shrink (O means no, 1+ means yes) 


flex-basis: auto | «length» 


< To define an items width, instead of the width property 


flex: © 1 auto | «int» «int» «len» 


& Recommended shorthand for flex-grow, -shrink, -basis. 


order: 0 | «integer»? 


< Controls order of items. -1 makes item first, 1 makes it last 
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HTML CSS 


i == 


< CSS Grid is a set of CSS properties for building 2-dimensional layouts 


& The main idea behind CSS Grid is that we divide a container element into 
rows and columns that can be filled with its child elements 


< In two-dimensional contexts, CSS Grid allows us to write less nested HTML 
and easier-to-read CSS 


< CSS Grid is not meant to replace flexbox! Instead, they work perfectly 
together. Need a 1D layout? Use flexbox. Need a 2D layout? Use CSS Grid. 


fas 


BASIC CSS GRID TERMINOLOGY 


COLUMN 
AXIS 


ROW AXIS 


display: grid 


Grid track/row 


COLUMN Grid lines 


AXIS N : 


Gutters (gaps) 


Grid track/column Grid cell (might be 
filled by a grid item 


b or not) 


ROW AXIS 


grid-template-rows: <track size>* 


grid-template-columns: <track size>* 


< To establish the grid row and column tracks. One length unit 
for each track. Any unit can be used, new fr fills unused space 


row-gap: 0 «length»? 
did s | gap: © | «length» 
column-gap: © | «length» 


& To create empty space between tracks 


justify-items: stretch | start | center | end 


align-items: stretch | start | center | end 


& To align items inside rows / columns (horizontally / vertically) 


justify-content: start | start | center | end | 


align-content: start | start | center | end | 


= To align entire grid inside grid container. Only applies if 
container is larger than the grid 


grid-column: «start line» / «end line» | span «number» 


grid-row: «start line» / «end line» | span «number» 


< To place a grid item into a specific cell, based on line numbers. 
span keyword can be used to span an item across more cells 


justify-self: stretch | start | center | end 


align-self: stretch | start | center | end 


< To overwrite justify-items / alLign- items for single items 


Grid lines Grid track/row 


Gutters (gaps) 


N 
AL 
AS AAA AAA C 


ie) 


Grid track/column Grid cell 


& This list of CSS Grid properties is not exhaustive, but enough to get started. 
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WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


OVERVIEW OF WEB DESIGN AND 
WEBSITE PERSONALITIES 


HTML CSS 


Web designers create the overall look and feel of a website 
Web developers implement the design using HTML, CSS and JavaScript code 


| We'll take it 
We'll take it | A ie oe > from here 


from here 


ms ds 
KK — 


DEVELOPER 


DESIGNER 
DESIGNER + DEVELOPER 


Creates an immediate and lasting good 
impression of the brand or product; 


Makes the user trust the brand right 
away; 


Increases the user's perceived value of the 
brand or product; 


Gives users exactly what they were 
looking for when coming to the site, e.g. 


purchasing a product or finding information. 


Makes users believe the brand doesn't 
really care about their product or service; 


Makes the user insecure about trusting 
the brand; 


Makes the brand or product seem 
“cheap”; 


Leaves users confused, and makes it 
hard to for them to reach their goal. 


ANYONE CAN LEARN GOOD DESIGN! 


100s of well- 
designed sites 
deconstructed 


MADE WITH PRIDE y 
Win 


Good web design 
is not subjective 
or creative 


Distilled into 
easy-to-learn and 
easy-to-apply 
rules 


p 


— 


Everyone can learn 
basics by following a 
framework/system 


Divided in 9 
different areas of 
design: 
ingredients 


Rules will be 
applied based on 
website 
personality 


a Typography 
2 Colors 
e Images/lllustrations 
ES Icons 

e Shadows 


BLUEWAVE 


| E Border-radius 
Join the solar energy 


revolution 
7 Whitespace 
Solutions I 
Our innovative community solar & project development solutions make 9 U se r E X p e ri = l E = 


64 Community Solar 
-— -— l Components/Lavout 


Homeowners, businesses, and towns can enjoy 
savings by signing up for a community solar share. No 


rooftop panels required! 


" Design decisions for each 
ingredient are based on 
website personality 


2 Community Salar Projact Services > 


You develop the project, let our team ooauire 


d manage the custamars 


2 Community Salar Sales Partners > 


OVERVIEW OF WEBSITE PERSONALITIES 


The Golden 


Center Apartments 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 
golden or pastel colors, and big high-quality images 


Location 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 
golden or pastel colors, and big high-quality images 


Minimalist/Simple: Focusses on the essential text content, using small or 
medium-sized sans-serif black text, lines, and few images and icons 


Build a better 
portfolio 
- 
RE co 
y le 
Timeless design Easily manage content 
Choose trom à suite of protessionally desgned Onplace provides a focused, urbicated 
themes to present your work clearly. Clean ines and adriristrabon panel for your ute. No other hosted 
readabity as standard porttolio is easier to keep updated. 
m 0 c 
So fast you"! never notice Mobile out of the box Autematic dark mode 
We optimise and deliver with a custom CON Your coment adapts beatif hy to tablets and Ever theme comes with the ability to match your or 
Bean nd ha heyfi rm fence om and aue acm oi ty auium ael orem deren. Curbed hound smiftip mih pura naslu e profu ew aa ard et as bgħa or duh 
vs mobile optimised assets. variants 


eee D < € & onplce.app e o Ò + 0 


Hubble Daily Lerses 


bee hand of Cores ann endet rs 


għad pew the HS east, Ped bie m gens 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 
golden or pastel colors, and big high-quality images 


Minimalist/Simple: Focusses on the essential text content, using small or 
medium-sized sans-serif black text, lines, and few images and icons 


Plain/Neutral: Design that gets out of the way by using neutral and small 
typefaces, and a very structured layout. Common in big corporations 


Winter Sale 


Now's your chance to save 


Get alter your goals wih deals on Surface devices. Forhelp choosing the right 
Surface, book a personal shopping appointment with à Microsoft Store 


associate 
BEE —e—— 


HH a eS H LA ES 


Choose your Shop Surface Buy Xbox games Shop Windows Find your next PC Shop Business 
Microsoft 36 devices and consoles 10 
(a) bg 
GAME PASS w X e 
[in MATH] ai 
Bundle and save up to $460 Surface Laptop 3 Xbox Game Pass Ultimate Microsoft 365 
Complete your Surface Pro 7 with choice of Express yourself powerfully with a than, light, Xbox Live Gold and over 100 sigh:quality Premium Office apps, extra cloud storage 
solo Type Cover and elegant design, faster performance, and console and PC games. Play together with advanced security, and more—all in one 
up to 11.5 hours battery life se and discover your nex: favonte converser subscnption 
Shop now For up to 6 people For 1 person 
Join now Compare al plans 


Black History Month u : WATCH DOCS 2 
- [dni 

Decover games, movies and TV selected by Black comrusnities at Microsoft DANDARA = > c 

Visa aka rr bhm to leem about contributions and more ^ z a. 


PANTHER 


vn g A nx D NV d 


For business 


Surface for Business Microsoft 365 for business Microsoft Teams Free business consultation 
No matter what you do, there's a Surface to Stay a step ahead with powerful apps for Chat, meet, call, and collaborite Our product experts are available to assesi 
help you do it productivity, comection, and security your need: and make recommendations for 
) ) ) i , 
your business 
Shop now Shop now 


Learn move 


OVERVIEW OF WEBSITE PERSONALITIES 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 
golden or pastel colors, and big high-quality images 


Minimalist/Simple: Focusses on the essential text content, using small or 


2 
medium-sized sans-serif black text, lines, and few images and icons 

3 Plain/Neutral: Design that gets out of the way by using neutral and small 
typefaces, and a very structured layout. Common in big corporations 

A Bold/Confident: Makes an impact, by featuring big and bold typography, 


paired with confident use of big and bright colored blocks 


[3 endplan 


Manage all of your 


DeFi, Fiat * Real 
assets from asingle 
platform. 


Get Early Access » 


Too many platforms 


Be the portfolio manager 
you always wanted with 
superiortools, tracking and 
community. 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 
golden or pastel colors, and big high-quality images 


Minimalist/Simple: Focusses on the essential text content, using small or 
medium-sized sans-serif black text, lines, and few images and icons 


Plain/Neutral: Design that gets out of the way by using neutral and small 
typefaces, and a very structured layout. Common in big corporations 


Bold/Confident: Makes an impact, by featuring big and bold typography, 
paired with confident use of big and bright colored blocks 


Calm/Peaceful: For products and services that care, transmitted by 
calming pastel colors, soft serif headings, and matching images/illustrations 


this time. 


We are in this together. 


Octave is 2 musical term, referring t a complete 
collection of musical notes. Similarly, our 
offering isa complete set of services to support a 
range of needs, preferences, and price points. 


We have assembled a talented team of clinicians, 
coaches, instructors, designers, and :echnologists 
to help guide you on your journey wherever you 
are, and provide a world-class experience along 
the way. 


In light of COVID-19, we now offer virtual 
therapy foe new and existing clients Check out 


our Virtua FAQs page for more information on 
the cost of virtual care. 


Why Octave? 


aa «em 
y di, zi 


Personalized Guidance Quality & Results Focused 


We hire outstanding therapists & coaches who 
are compassionate. honest. and focused on 
measurable change. 


We match you with th« right provider and 
service to meet your neecs. your schedule. and 
your price point. 


Therapy Virtual Coaching Groups Insurance Resources Locations v 


Come as you are. 


Supporting your emotional well-being through 
specialized therapy, goals-based coaching and 
skills-based workshops, all offered virtually at 


EP 1$ n 


Supportiva Community 


We believe that everyone needs a connected 
place where they can improve their emotional 
well-being and create lasting change. 


Capsule Features v Pricing integrations ~ Solutions v Blog Support Log in 


EEXFYENM MEE 
The smart simple > T l a ja : 
. $ $ 
online CRM e Wr ap e l 
easa o : © . 
Serious/Elegant: For luxury and elegance, based on thin serif typefaces, ea 
golden or pastel colors, and big high-qualitv images 
Minimalist/Simple: Focusses on the essential text content, using small or 
medium-sized sans-serif black text, lines, and few images and icons FI 
É i 
Plain/Neutral: Design that gets out of the way by using neutral and small —— —— AA 
typefaces, and a very structured layout. Common in big corporations certam know he history so the deat nnd ate 
Bold/Confident: Makes an impact, by featuring big and bold typography, a e 


4 
paired with confident use of big and bright colored blocks See the big picture Keep vour data safe ie 


to help with any query!” 


Advanced Reporting + Security 4 Permissions + 


Calm/Peaceful: For products and services that care, transmitted by 
calming pastel colors, soft serif headings, and matching images/illustrations 


Connect Capsule to your favorite applications 


Capsule works seamlessiy with popular applications such as G Suite, Mailchimp, Xero and 


Startup/Upbeat: Widely used in startups, featuring medium-sized sans- 


serif typefaces, light-grey text and backgrounds, and rounded elements QE mabchimp o G Suite T zendesk 


nd iC Dunt ing. 


O quickbooks zapier Freeagent W) 


View all integrations > 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 
golden or pastel colors, and big high-quality images 


Minimalist/Simple: Focusses on the essential text content, using small or 
medium-sized sans-serif black text, lines, and few images and icons 


Plain/Neutral: Design that gets out of the way by using neutral and small 
typefaces, and a very structured layout. Common in big corporations 


Bold/Confident: Makes an impact, by featuring big and bold typography, 
paired with confident use of big and bright colored blocks 


Calm/Peaceful: For products and services that care, transmitted by 
calming pastel colors, soft serif headings, and matching images/illustrations 


Startup/Upbeat: Widely used in startups, featuring medium-sized sans- 
serif typefaces, light-grey text and backgrounds, and rounded elements 


Playful/Fun: Colorful and round designs, fueled by creative elements like 
hand-drawn icons or illustrations, animations, and fun language 


Search A © Khan Academy Donate Login Signup 


For every student, 
every classroom. 
Real results. 


We're a nonprofit with the mission to provide a free, world-class 


education for anyone, anywhere 


| wearers | rennes [rares | 


Personalized learning Trusted content Tools to empower teachers 
Students practice at their own pace, first Created by experts, Khan Academy's library With Khan Academy, teachers can identify 
filling in gags in their understanding and of trusted practice and lessons covers math, gaps in their students’ unders:anding. tailor 


then accelerating their learning science, and more. Always free for learners instruction, and meet the needs of every 
and teachers. student 


Differentiate your 
classroom and engage 
every student. 


We empower teachers to support their entire classroom 


90% of US teachers who have used Khan Academy have 


found us effective 


YN JONAS.IO 


SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES #1: 
TYPOGRAPHY 


HTML 


bh 
Typography is the art and technique 


of arranging type to make written 
language legible, readable and appealing 


when displayed. 
— Wikipedia 


SOME CONCEPTS FIRST... 


SERIF VS SANS-SERIF 


Text Text 


Serif typeface Sans-serif typeface 


Z- Creates a traditional/ © Modern look and feel 


classic look and feel 
S- Clean and simple 


< Conveys trustworthiness l 
£- Easier to choose for 


< Good for long text beginner designer! 


LUXURIOUS and 
CONTEMPORARY APPEAL 
Jor ENERY WOMAN 


ci 


Greenlight makes it easy to leave 
feedback on any website. 


Add to Chrome 


Inter 

Open Sans 
Roboto 
Montserrat 
Work Sans 


Lato 


$ Use only good and popular typefaces and play it safe 


Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 


Almost before we knew it, we had left the ground. 


Almost before we knew it, we had left the ground. 


“£ TOOLBOX 


AB Google Fonts 


FONT, 
All tools are listed D 
on my resources 


page at jonas.io 


Merriweather 
Aleo 

Playfair Display 
Cormorant 
Cardo 


Lora 


e Use only good and popular typefaces and play it safe 


Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left the ground. 
Almost before we knew it, we had left che ground. 


Almost before we knew it, we had left che ground. 


Almost before we knew it, we had left the eround. 


“£ TOOLBOX 


AB Google Fonts 


FONT, 
All tools are listed D 
on my resources 


page at jonas.io 


$ Use only good and popular typefaces and play it safe 
e It's okay to use just one typeface per page! If you want more, limit to 2 typefaces. 


e Choose the right typeface according to your website personality: 


Z- Choose the right personality for your website (more on this later) 
© Decide between a serif and sans-serif typeface 


= Experiment with all the "good" typefaces (and other typefaces from Google Fonts!) to see 
which ones best fits your website's message (this will come with experience) 


© You can keep trying different typefaces as you design and build the page 


When choosing font-sizes, limit choices! Use a 
“type scale” tool or other pre-defined range 


10px 
12px 
14px 
16px 
18px 
20px 
24px 
3Opx 
36px 
44px 
52px 
62px 
7Apx 
86px 
98px 


Adapted from a Minor 
Third (1.2) type scale 
with base 10px 


Home Case studies Tools v Careers Blog About Log in 


Build your recruitin 
engine with Dover. 


No more juggling recruiting tools—Dover finds and schedules candidates you actually 
want to talk to, at a fraction of the cost. 


When choosing font-sizes, limit choices! Use a — 
ae ” e Join the 100+ companies relying 
type scale” tool or other pre-defined range 32px on Dover to find the best talent 


Use a font size between 16px and 32px for 
“normal” text 


For long text (like a blog post), try a size of 
20px or even bigger 


For headlines, you can go really big (50px+) 
and bold (600+), depending on personality 


s We di 
For any text, don't use a font weight candidates yot e 
under 400 (regular) dades £ 


. 
Dover uses a robust calibration process to deeplv c» 
understand your requirements. Cd 
Then, our system evaluates prospective candidates m 


on 50+ data points so we can find qualified 


e 


Glassmorphism in user 
interfaces 


Another year, another UI trend is becoming increasingly popular 
among designers. Do you know it yet? 


G Michal Malewicz Nov22,2020 - 8 min read * NN = 
E 


ast year I unintentionally started the craze around Neumorphism, 

but as I predicted then, it didn't really take over the design scenc. In 
that very first article, 1 also mentioned all the potential accessibility 
problems this style faces, which hopefully helped all the other articles 


raising accessibility issues that year :-) — 65-72chars - 


9 Use less than 75 characters per line 


Glassmorphism in user interfaces -NO chars | 


Another year, another Ul trend is becoming increasingly popular among designers. Do you know it yet? 


E 
ó Michal Malewicz Nov 22, 2020 : 8min read * C) q = 


ast year I unintentionally started the craze around Neumorphism, but as | predicted then, it didn’t really take 
L over the design scene. In that very first article, I also mentioned all the potential accessibility problems this style 


faces, which hopefully helped all the other articles raising accessibility issues that year | 95-Ti2chars - 


9 Use less than 75 characters per line 


For normal-sized text, use a line height 
between 1.5 and 2. For big text, go below 1.5 


& The smaller or longer the text, the larger the line 
height needs to bel 


e 


Glassmorphism in user BN 
interfaces 


Another year, another UI trend is becoming increasingly popular 
among designers. Do you know it yet? 


Fin 
& Michal Malewicz Nov 22, 202U - 8 min read % 
w 


ast year I unintentionally started the craze around Neumorphism, 

but as I predicted then, it didn’t really take over the design scene. In 
that very first article, I also mentioned all the potential accessibility 
problems this style faces, which hopefully helped all the other articles 


raising accessibility issues that year :-) Ec 


EN 0) L. sse 


Glassmorphism in user (as 
interfaces 


Another year, another UI trend is becoming increasingly popular 


among designers. Do you know it yet? KN 


4 V 
g Michal Malewicz Nov 22, 2020 - 8 min read * AR -- 
w 


I, ast year I unintentionally started the craze around Neumorphism, 


but as I predicted then, it didn't really take over the design scene. In 


that very first article, I also mentioned all the potential accessibility 


problems this style faces, which hopefully helped all the other articles 


raising accessibility issues that vear :-) E S 


CREATE A GOOD READING EXPERIENCE 


10 


11 


0 
Use less than 75 characters per line Y 


For normal-sized text, use a line height 
between 1.5 and 2. For big text, go below 1.5 
& The smaller or longer the text, the larger the line 


height needs to be! 


Decrease letter spacing in headlines, if it looks 
unnatural (this will come from experience) 


Manage all of your 
DeFi, Fiat + Real 
assets from a single 


platform. 


Get Early Access > 


Manage all of your 
DeFi, Fiat + Real 
assets from a single 


platform. 


Get Early Access » 


Use less than 75 characters per line 


For normal-sized text, use a line height 
between 1.5 and 2. For big text, go below 1.5 
& The smaller or longer the text, the larger the line 


height needs to be! 


Decrease letter spacing in headlines, if it looks 
unnatural (this will come from experience) 


Experiment with all caps for short titles. Make 
them small and bold and increase letter-spacing 


HAPPINESS GUARANTEE H 
Love it, or it's on us. 


Here’s why we know you will. 


" 
ġà 


2 


Try Feals risk-free 


Free shipping and free returns. 


No fuzzy haze 


Feel better and keep a clear head. 


All natural ingredients 


Grown with care by US farmers. 


Happiness Guarantee gg 
Love it, or it's on us. 


Here’s why we know you will. 


VW 


w 


8 
e 


Try Feals risk-free 


Free shipping and free returns. 


No fuzzy haze 


Feel better and keep a clear head. 


All natural ingredients 


Grown with care by US farmers. 


Use less than 75 characters per line 


For normal-sized text, use a line height 
between 1.5 and 2. For big text, go below 1.5 


The smaller or longer the text, the larger the line 
height needs to bel 


Decrease letter spacing in headlines, if it looks 
unnatural (this will come from experience) 


Experiment with all caps for short titles. Make 
them small and bold and decrease letter-spacing 


Usually, don't justify text 
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Glassmorphism in user 
interfaces 


Another year, another Ul trend is becoming increasingly popular 
among designers. Do you know it yet? 


te 
Q Michal Malewicz Nov 22,2020 - 8 min read * mg 
w 


ast year I unintentionally started the craze around Neumorphism, 


but as I predicted then, it didn’t really take over the design scene. In 


that very first article, I also mentioned all the potential accessibility 
problems this style faces, which hopefully helped all the other articles 
raising accessibility issues that year :-) 


Glassmorphism in user 
interfaces 


Another year, another Ul trend is becoming increasingly popular 
among designers. Do you know it yet? 


8 Michal Malewicz Nov 22, 2020 - € min read + 0 [] = 


ast year I unintentionally started the craze around Neumorphism, 


but as I predicted then, it didn't really take over the design scene. In 


that very first article, T also mentioned all the potential accessibility 
problems this style faces, which hopefully helped all the other articles 


raising accessibility issues rhat year :-) 


Sure — there were some apps and products donc in this style, but most 
notable, widespread uses were in some Samsung ads and in the MKBHD 
intro video. So not any full products, but rather smaller elements which 
proves my thesis that this style can work il used scarcely and if the objects 
on these backgrounds still hold their structure and readability without the 


decoration. 


Use less than 75 characters per line 


For normal-sized text, use a line height 
between 1.5 and 2. For big text, go below 1.5 


The smaller or longer the text, the larger the line 
height needs to be! 


Decrease letter spacing in headlines, if it looks 
unnatural (this will come from experience) e 


Experiment with all caps for short titles. Make 
them small and bold and decrease letter-spacing 


Usually, don't justify text 


Don't center long text blocks. Small blocks are fine 


Know what's 
trending | 


Las* shock up bu arce and small. Custome 
now expect more and companies are tryin Atech up. 85% 
nf teams reported making changes ta their support in 2020 
and 75% said the coronavirus pandemic elerstec adoption 

ofa dde al technologie 


The ripples of a more distributed world wil: only spread farther 

in 2021. To help you keep up, we identified the top jive 

customer service trends in our 2021 Zendesk Customer 

Expenence Trends Report. Learn how to adapt te a changed 
cr na tap-tier customer sunnort. 


Know what's 
trending 


Lest year shook up busin s large are small. Customers 
now expect more=and companies are 1 ta catch up. 35% 
ofteams reported making changes to the an ort in 2020, 
and 75% said ine coren s pandemic tod adoption 
“ digital technologie 


The npples of a mare distributed world will only spread farther 
in 2021. To heip you keep up, we identified the top five 


; ome 
Experience Trends Repor arn how to sec to a changed 
world winot sacrificing top-tier customer support. 
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SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 
WEB DESIGN RULES #2: COLORS 


HTML CSS 


e Make the main color match your website's personality: colors convey meaning! 


Red draws a lot of attention, and symbolizes power, passion, and excitement 


Orange is less aggressive, and conveys happiness, cheerfulness, and creativity 


Yellow means joy, brightness, and intelligence 


Greens represents harmony, nature, growth, and health 


Blue is associated with peace, trustworthiness, and professionalism 


Purple conveys wealth, wisdom, and magic 


Pink represents romance, care, and affection 


Brown is associated with nature, durability and comfort 


Black symbolizes power, elegance and minimalism, but also grief and sorrow 


e Make the main color match your website's personality: colors convey meaning! 


e Use a good color tone! Don't choose a random tone or CSS named colors. 


Red ndigo Green 
RED C RE! F£DZ 05 RED 4 MC 0 rood DOQ i nao 3 HOOO 4 CARA O QEGGĦA OWEN? TAEEN 3 ut | | 
ur MIO E "Dco; NIGO B MDOI» nee‘ nera num y WNA 
oc- Open color 
Pink Blue Lime 


Peo PMA 1 Ph i rn) FHK A muEC LAS ! BLUG? UVE 9 UNE 1 LME i WE LMC 4 


Orape Gyan Yellow 

GUA o uam 1 GIA 7 mame T amey 2 C*ANO Own! O/M 2 CYAN 3 [e IP] TULL C ran VeLLOW 3 FELLOW ì "ws 
OFA»f 5 MATO omet? mtt CYAM S CHINE CYAN 7 TAN $ VALOĦ 0 LOWI DIT LE 

Violet Teal Orange 


WICLETO voit MOLET 3 WAET 2 VIOLET 4 van ru WA > mus” u.ä CAAWDEC OFANZCI ONE ? DMA OL D ORnANCE 4 


LESTIE veneers wasla var" Ami $ INTA Y 


CHOOSE THE RIGHT COLOR 


1 Make the main color match your website's personality: colors convey meaning]! 


2 ` Use a good color tone! Don't choose a random tone or CSS named colors. 


Gray 
colors .cocló6ra / 


50 ^an 200 300 400 500 Bon 700 ann 200 


HEDFAFZ #F2F4F3 ĦESEJEB #DIDSDB RECAZJAF #587280 ĦAESSB3 #374151 41F2937 4111827 


Red | | 
colors. reg as 
goc 700 aco 200 


50 190 200 309 400 500 
NFEF2F2 WFEE2E2 RFECACA MFCASAS #F87171  £IF4444 4DC2626 FESCIC 4991875 47FIDID 


“£ TOOLBOX 


TUROUDISE EMERALD PETER RIVER AMETHYST WET ASPHALT OC- Open color 


Yellow 


colors.ambet: NE Em ES IG) EJ 
" 


50 go 200 300 400 500 ECC ¿00 
SFFFBEE #FEF3C7 FEFIEGEA ĦELISAL #FBBF24 F-SSEVB ADL? 


- „> tailwindcss 


colors emerald 


50 100 200 305 400 550 600 700 aco 300 
arcrnp^5 «mTTA"5 MAFFANO HAP II? sC4p399 H10n201 659655  O047n57  4n6sr46 KOBAFIN 


Blue 
colors.D.ue 


GREEN SEA NEPHRITIS BELIZE HOLE WISTERIA MIDNIGHT BLUE 


FLAT UI COLORS 2 


50 100 200 300 400 500 600 700 200 200 
EFF6F= WDBEAFE ABFDEFE #03CS5FD MECASFA #3882F6 A2563EB #IDAEDa 51 


Bon 
War 46L3 


Purple 
colors. Vic let 


50 +90 200 309 400 500 ecc 700 
#F5F3FF #EDEGFE RDDDGFE 4CABSFD ĦAJBBFA #SBSCF5 &?7C3AED &GD28D9 


50 au 200 300 400 
( 2 ' > i ASUJI C CIDS U j 
#LLI ZI WLOL; "C/U #ASUJIC REIL! U Jung J ALIZARIN 


Pink 


colors.p rk ġa i [E] ES 


E 700 200 30U 400 
FE 


"FD-2F8 WFCE7F3 f 


rc "rGNSIm CATIA 
ts Peo ASU4 TF Zoo 


PUMPXIN POMEGRANATE 


COLOR 
PALETTE 


We discover 
candidates you 
actually want to 
talk to. 


Dover uses a robust calibration process to deeply 
understand your requirements 


Then, our system evaluates prospective candidates 


on 50+ data points so we can find qualified 
candidates who are the best possible fits. 


£ 


e You need at least two types of colors in your color palette: a main color and a grey color 


a With more experience, you can add more colors: accent (secondary) colors (use a tool) 


"IAN" 


e You need at least two types of colors in your color palette: a main color and a grey color 
4 With more experience, you can add more colors: accent colors (use a tool) 


5 For diversity, create lighter and darker “versions” (tints and shades) 
“£ TOOLBOX 


O MAN ACCENT Nu oc- Open color 


«>~ tailwindcss 


TINTS 
("LIGHTER") 
FLAT UI COLORS 2 
COLOR 
PAIETTE ©) palleton.com 
COOULO(S 
SHADES 
("DARKER’) 


WHEN AND HOW TO USE COLORS 


6 Use your main color to draw attention to the most important elements on the page 


O Narrative Bl Product Why Narrative BI? About 


Meaningful Insig hts You should expect revenue increase by 

55% in the next three months as a result of 
Without the Click of a ndm 
Button. 


Narrative Bl is a new user-friendly tool that 


The simpler way of 


uses proprietary anomaly detection technology 


saying 


Discover Yausign: the easy-to-use, lacally binding eSignaturs solution fer 
y 


to bring meaningful insights to the user without 


a single click. 


WHEN AND HOW TO USE COLORS 


6. Use your main color to draw attention to the most important elements on the page 


LATEST COLLECTION 


Love where you live, 
and who you live with Autumn — 


re 
Move-in ready homes and a built-in community VI CY 
so you can feel at home, together—wherever you are. E 
— — 


Earthy tonas, knitted patterns 


Refer for up to $500 


Find my homa 


ard metal c accents are what 


characterizes this Autumn 


Winter collactian 


LOOKBOOK > 


NA ums ^ 
e 


LLL CA 
€ 1 A — m 
IN 
É Ben 


WHEN AND HOW TO USE COLORS 


6 Use your main color to draw attention to the most important elements on the page 


How itworks About Pricing 


hitchd 


Guests fund your 
-— — honeymoon. 
The Ultimate _. os Beautiful. Fast. Simple. 
A M L C O m p | | a n C e tien vars na : ae The simple, modern, and meaningful way to fund your 

TH AA — w— adventure of a lifetime. Your quests are going to love it. 
Technology : 


monitoring 


Start your registry View sample registry 


TM 


Advanced KYC & KYT 


Free trial. No credit card reauirec 


Andre Jilderda 


Freelance frant-end developer 


06 208 42 105 


mail& andrajilcerda.n! 
LinkedIn 


Make the most of 
your shares 


Developer-first 
Ope e SD 
p : ^A^RG IL. 8cCL mple 
We are a team of equity experts 100% focused on 
( + 
helping startup employees understand, maximize and 
unlock the value of their stock options and shares 


= O 


Gets feedback from 
stakeholders. 


Works everywhere, 
even when you need to 
With Green as 


a ght y Ou can easly « 


log in. 


$33M 


Trackable *everue generated 
across Our portfolio 


220% 


Average yearly growth rata across 
our clients 


— 


“y Eu 


Share securilv with 
team members. 


Greenlight makes sure t 


Ax 


nzrease in client creative cutpu' 
on average 


I=! t 
TIT sl 
Extensible Enterprise-readv 
Istry-Ieadinc Build location-based ex per CES across the Ruilt for scale, processin IQR- | ions per 
flexible omer journey, from messaging to curbside year from 100 devices with enterprise-grade 
pickup to address autocomolete security. privacy, and 5 rt 
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Low minimums Lightning fast delivery 


Order as few as 20 shirts to get you 


Try our 2-day service and get you 
project started. 


by February 12 


Talkto a human 
ur team of apparel experts 
jays an ema, phone 
even a click awav 


6 Use your main color to draw attention to the most important elements on the page 


e Use colors to add interesting accents or make entire components or sections stand out 


Don't settle for 
custom shirts 
no one will 
wear. 


Your brand is too valuable to print 


n scratchy, ill-fitting shirts that no 
one will wear. 


Real Thread's library of soft shirts, 
unique print options, and simple 
order process make it easier than 


ever to order shirts you'll love and 
wear proudly. 


Native mobile apps SaaS applications 


U ġital plattorms Design systems 


Let’s team up and design 
something remarkable 


o Sperd-u3 your product road nap 


e Flexible work"ow & fast communication 


o Remote or in-person sessjoni 


Getintouch > 


Enterprise soltware 


Design aadits 


v 

EB € 
ro 

— 's 


Would you like to see Narrative 
Bl in action? 


Leave your amall acicress to discuss how 


your company can cet first actionable 
Insights taday 


WHY CHOOSE WEALTHFRONT? 


Meet Self-Driving Monev'", 


We mani lo aplim ze pour money acies ali a, 
eninge and inveciments, puting E al vo work 
sFolesaly, 


wpostt your pawo ect with vas Pov 204, woh cx 


sich staaten sou con hav? ve automarn tho rect Crereecy find B 


On feas can top oll yas eee pos knd poya 
Hone merca O 


You Als and even ver: the rect so Polo mont your 
azels We col che iż 3 Gai mia More" ta Low turn rw @ 
Parches 
159 An vii © 


wer. © 


Essential 
All the basics to get started 


29€ frc 


Hiller Manthby 


(A S Users 


Collabaratian faaturas 


AUTC-GENERATON 
(4 Unlimited generations 
(P) 1 000 banner exportsfmanth 


©) B brand presets 


CREATIV= AUTOMATION 
Ò Unlimited templates: 


(7) 2000 API cellsfemorth 


© Zapier integration 


Try for free 


6 Use your main color to draw attention to the most important elements on the page 


e Use colors to add interesting accents or make entire components or sections stand out 


Advanced 


*ermert for agile teams 


79€ imc 


Sillad Monthly 


(Q 


15 Users 


Collaboration features 


ta 


y 
a) 


AUTO-GENERATICN 
(2 Unlimited generations 
(^ § 000 banner exportsfmanth 


(A ED brand presets 


CREATIVE AUTOMATION 


Undine ted templates 


10 000 API ce Ilsimonthi 


Ow & 


Zepier integration 


| Try for free 


WHEN AND HOW TO USE COLORS 


6 Use your main color to draw attention to the most important elements on the page 


7 Use colors to add interesting accents or make entire components or sections stand out 


Compete 


Develop. against the 
Preview. = 


The perfect pitch, 
E Jess, CEO of Acme every time. 


Dover builds your company's brand and leverages it for all 
candidate communication. 


9 Nisha, Senior Software Engineer 
Then, we reach out to candidates as someone on your team. 


/ 
ia 
Saw that you worked at Facebook — Jason Candidates are 5x more likelv to respond when they see a ~~ 
lu ee thoughtful note from a future teammate. > 
too! l'd love to hear more about your work uw 
L3 


Re you or 
migrating your team to Typescript. It's actually 
on our roadmap for next quarter.) 


on 


f 


Gin 
COMPETITION WORKS 


Competition has been scientifically proven 
to make you exercise up to 90% more. 


206 Lniversity of Peras y vania Study 


What Activities Will You Offset" 
Naumralize your carbon teotnrnt with the 
Cover A71 

Try Char y 


Allmen Pree 


Byn'hoto Fillor: 


We're not about 


pseudoscience and half- 


truths 


The Prenatal Multivitamin 


Audacious 
goals, 
smashed. 


From marketing strategy and Inadership 
through execution and results; 
Matter Maze produces reliable growth. 


6 Use your main color to draw attention to the most important elements on the page 
e Use colors to add interesting accents or make entire components or sections stand out 


e You can try to use your color strategically in images and illustrations 


cy Why Cerro? for emoloyen Fer commitants Far health plans Company - ( Sgr in 


Global fertility benefits for 
employers that save money 
and tame anxiety 


9 $a. 
KA a B 
ti 4e B 


A customizable 
solution to fit every 
company 


COLORS AND TYPOGRAPHY 
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On dark colored backgrounds, try to use a tint of the background (“lighter version”) for text 


0% 


Defi, documents & 
real assets in one 
place 


Map, valuations and community ideas to help you grow 
your wealth. 


Why Endplan > 


Finance your 
markeling 


' for your marketing campaigns (ie 


Defi, documents €: 
real assets in one 
place 


Map, valuations and community ideas to help you grow 
your wealth. 


Why Endplan > 


Finance your 
marketing 


ay for your marketing campaigns (Le 


acebook, Google) with a Scttle card, For a 
you can repay after 60 days o 
X d payments for another 60 after that, 


. On dark colored backgrounds, try to use a tint of the background (“lighter version”) for text 


e 


Make the right hires, faster with the 
world's leading talent acquisition E 
software 


AUTOMATE 
Make the best hire, 


FIND EVALUATE 
Find and attract Move the right 


candidates applicants forward in half the time 
Fill your pipeline quickly with one-click job Easily collaborate with hiring teams to Move faster on a platform that automates 
posting to 200+ sites, Al-powered sourcing, evaluate applicants, gather feedback and process and manual tasks, like scheduling 


employee referrals and more. decide who's best, all in one system. interviews and getting approvals. 


LEARN MORE > LEARN MORE > LEARN MORE > 


Own your health. 
Advance medicine. 


See your entire health history-ct a glance, Contribute 10 
medical research—anonymously and securely. 


» Get My Records 


o 


a0 Text should usually not be completely black. Lighten if up it looks heavy and uninviting 


Make the right hires, faster with the 
world's leading talent acquisition * 
software 


AUTOMATE 
Make the best hire, 
in half the time 


FIND EVALUATE 
Find and attract Move the right 
candidates applicants forward 


Fill your pipeline quickly with one-click job Easily collaborate with hiring teams to Move faster on a platform that automates 


posting to 200! sites, Al- powered sourcing, evaluate applicants, gather feedback and process and manual tasks, like scheduling 


employee referrals and mare. decide who's best, all in one system. interviews and getting approvals. 


LEARN MORE > LEAAN MORE > LEARN MORE > 


Own your health. 
Advance medicine. 


See your entire health history-at a glance. Contribute to 
medical research-anoryrrously and securely. 


COLORS AND TYPOGRAPHY 
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On dark colored backgrounds, try to use a tint of the background (“lighter version”) for text 
Text should usually not be completely black. Lighten it up it looks heavy and uninviting 


Don’t make text too light! Use a tool to check contrast between text and background colors 


x 


$ Contrast ratio needs to be at least 4.5:1 for normal text and 3:1 for large text (18px+) 


COOULO(S 


creative business 


13:1 Creative DUSINES! 2 9:1 


Zibbet exists to help artists, makers and creative entrepreneurs 


Zibbet exists to help artists, makers and creative entrepreneurs 
sell more. Now you can list a product once, sell it everywhere sell more. Now you can list a product once, sell it everywhere 
and grow your sales faster. and grow your sales faster. 
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WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES #3: IMAGES 
AND ILLUSTRATIONS 


HTML ESS 


USE GOOD IMAGES 


1 Different types of images: product photos, storytelling photos, illustrations, patterns 


EEE WENN 
ou Ze $$ B 4 € Create your 


eb. ja 
273 M^ e Qa i own beautiful Mario Castillo Ea 


photo journal. A a | 


Capture every 


day of your year 
1510 Photos in one single photo, 


Carrot Rx 


A single souros for fertility medicaticris — 
with free de iwary and up te 60% savings 
Exceptions! care and personalized 

sten ol toe way 


Sappart every 


Learn more 


Try not to miss a day ——7 
fo keep your streak up. 


Fasa 
Stones 
Turorlals 
My Gears 


Discover Your Strength Shop 


Interface, 
streamlined. 


r 


Robust. 


List end board. 


USE GOOD IMAGES 


1 Different types of images: product photos, Storytelling photos, illustrations, patterns 


Let us do the heavy lifting 


Goal-Focused Coaching 


When you use our fulfillment services, we handle the labor-intensive logistical work One-on-ane program offered virtually, focusing 


on targered skills frarn cognitivo behavioral 


Get ahead of by picking, packing, and shipping your orders while you focus on building your brand 


and connecting with your customers. 


therapy and mindfulness to help you move past 


the curve 


The Zeedeak Benchmark allows ċiġanizationa to measure their 


challenges and create actionable goals. This can 
be a less expensive, effective alternative to 


customer support performance against their peers. Think of il 


therapy, or can serve tn suppiement therapy. 
wi E w 


as a friendly competition. It isn't a survey or an expert opinior 
t's the single best data index based on actual customer 


Support interactions from morc than 90,000 companies 


using Zandesk 


- E M Start fulfillment 


S: 
—Á 
a 

s sF 


i Anyone, 
anywhere, can 
start a business 


| Enter yaur email address 


Start free trial 


GET STARTED 


ry Shanty fran far 14 caya, no crede cand cm quam. Bg amenna sar 


smal, you en In rwr» te imi ket ing enaiz Arsen Shopify 


e Different types of images: product photos, storytelling photos, illustrations, patterns 


We’re obsessed ur, 
Put the human with growth 
back in HR. 


eU Win Cae Foremplyers Furio Farhetple Compary + 


Meet the team 2ehind today’s fastest 
growing brands, 


Global fertility benefits for Sa eu 
employers that save money 
and tame anxie di 
id — | 
——— MM 
^M 
You don't have to 
Y " et play all the parts. 


For the latest froer our Carrot experts on COVIO49 and fertility, please vitit ourresource center —> 


pai ee What our clients 
A customizable pe DE MM ae say about us 
solution to fit every 
company 


Whether youre à Startup or à global Corporason, 
prepa n hdp you avoid nearly 70% cf high- 
ost pregnancies with fiexbl i 


Commu er pr gr er iE 
process were srocthly and exactly as 


How It works 


442 


Tech Entrepreneur 
ATLAMIA, OEONG A 


Automate Software 
Build and Testing 


Drone is a self-service Continuous Integration 


platform for busy development teams. 


GET STARTED DOCUMENTATION 
c 


Searching for locations 


ncrease Conversions by connecting customers with nearby places and 


l 
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: d 
things. 4 "x ġ 
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La, Y ta qa? 


y ANN 
D ( 
Search and geocoding APIs — 0 4 v? p 
b le 
Flexible and affordable gescoding, search, and L 4 L| ` 
distance APIs with high-quality address and 1 i Pr - y 


olace data. * 
o restaurant| 


"tw 
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Ġ Different tvpes of images: product photos, storvtelling photos, illustrations, patterns 


Collaborate like 
never before 
Collohommior is king Work on prototypes 
age ber zwreg riberzcboe: fiemies, and 
enmmunisarn each iamemacriarn wih 
intant us nc cur rez pas factura. 


USE GOOD IMAGES 


1 Different types of images: product photos, storytelling photos, illustrations, patterns 


Join Khan Academy today 


Learners 


The customer experience Teachers 
is always right. 


— 


Y 
A 
ne 


Give todav 
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CA 


I 
m 
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si M 


"As usual, Capsule go aver and beyond Fasion magazine editor and Grammarly user 


to help with any query!” 


Sian Carter 


& From 
d+ Jess, CEO of Acme 


Not Ready to Jump B. a l 
in vet7 Stav in £ 9 Nisha, Senior Software Engineer 
touch. | 2 f In Ready to get started? | | : Saw that you worked at Facebook — Jason 


from our team worked there before joining us 
too! I'd love to hear more about your work 
migrating your team to Typescript. It's actually 


Share your email addroer to receive the firet 2 chapters of Beyond Coffee 


REF 
on our roadmap for next quarter. 
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USE GOOD IMAGES 


1 Different types of images: product photos, storytelling photos, illustrations, patterns 


2 Use images to support your website's message and story. So only use relevant images! 


Built-in eraser Magnetic accessories USB C connectivity 


PRO 
Sk /5tand Desk 
BILDER TR Rail 
Built-in power 
Offset Your Carbon Footprint in Real Time 
ties powe ad AF calcu ates the in pect of common za bone fiers ve az «Fes mi oo! Uere ard oves 
qu alas Dam Ror , tale? Ce 
Wy new, © Contact. 
$ Organic, Plant-Based 
A cx l al Superloods 
= AL 
ja, ) 
d d | 
fs i Dar loyal comspantous deserve the best. Tir 5 why we ve created 
«li ^ 
Qu^ 


USE GOOD IMAGES 


1 Different types of images: product photos, storytelling photos, illustrations, patterns 


2 Use images to support your website's message and story. So only use relevant images! 


"Being able to point to Trendmo and have our clients 
Champion their 
career 


Sama connects your amployees to the 
best professional ccach for them. Built tc 
seamisssiv fit into your organisation, and 
powered by sophisticatec technology and 


instantly understand the value of our strategies has been a 


game-changer for our team." 


Ann Thompson 


Southbird Creative 


our team of highly experienced coac 16s. 


Bcokacemo 


Enabling breakthrough 
research. 


Want to be part cf something bigger? PicnicHaath 
partners with some of the world's leading reseorchers to 
develop breakthroughs in medicine. 


By opting in to contribute anonymized medical data ta 
research, you con join forces with thousands of others who 
are nelping advance science. Because the more we know 
as a medical community, the more opportunity we have for 
discoveries that can change health for you, your loved 
ones, anc people around the world. 


e Different types of images: product photos, storytelling photos, illustrations, patterns 


e Use images to support your website's message and story. So only use relevant images! 


e Prefer original images. If not possible, use original-looking stock images (not generic ones!) 


> Solar Development > Solar Development 
We work at the forefront of responsible solar We work at the forefront of responsible solar 
development. Partner with us to develop innovative 


development. Partner with us to develop innovative 
utility-scale solar. 


A Developers and Property Owners > 


utility-scale solar. 


A Developers and Property Owners > 
Learn how our experianced team con deliver 


Learn now aur exper enced team can deliver 
solutions that let you maximize the value of 


solutions that lat you maximize the value of 
your lana. 


your lana. 


(D PROFESSIONAL PHOTOGRAPHER - HIGH-QUALITY STOCK PHOTO 


e Different types of images: product photos, storytelling photos, illustrations, patterns 
e Use images to support your website's message and story. So only use relevant images! 


e Prefer original images. If not possible, use original-looking stock images (not generic ones!) 


> Solar Development > Solar Development 


We work at the forefront of responsible solar We work at the forefront of responsible solar 
development. Partner with us to develop innovative development. Partner with us to develop innovative 
utility-scale solar. 


utility-scale solar. 


m Developers and Property Owners > 


m Developers and Property Owners > 
Learn how our experienced team con deliver 


Learn now our experienced team con deliver 


solutions that lat you maximize the value of 


solutions that let you maximize the value of 


(D PROFESSIONAL PHOTOGRAPHER - HIGH-QUALITY STOCK PHOTO 


> Solar Development 


We work at the forefront of responsible 
development. Partner with us to develop 


utility-scale solar. 


A Developers and Property Owners > 


(D PROFESSIONAL PHOTOGRAPHER 


solar 


Learn how our experianced team can deliver 
solutions that lat you maximize the value of 


innovative 


> Solar Development 


We work at the forefront of responsible 
development. Partner with us to develop 


utility-scale solar. 


m Developers and Property Owners > 


I nm i 
x 


m GENERIC-LOOKING STOCK PHOTO 


solar 


Learn how aur experienced team con deliver 
solutions that let you maximize the value of 


e Different types of images: product photos, storytelling photos, illustrations, patterns 
e Use images to support your website's message and story. So only use relevant images! 


e Prefer original images. If not possible, use original-looking stock images (not generic ones!) 


innovative 


USE GOOD IMAGES 


1 Different types of images: product photos, storytelling photos, illustrations, patterns 
2 Use images to support your website's message and story. So only use relevant images! 


3. Prefer original images. If not possible, use original-looking stock images (not generic ones!) 
“£ TOOLBOX 


T Unsplash 


f D Pexels 


Use images from 
here instead (for k m 
free Y) ® Arcadi 


unDraw 


USE IMAGES WELL 


4- Try to show real people to trigger user's emotions 


(a 


My roommates are my 
favorite people I've met 
since moving. 


Campaigns 


bp Bend Newel 


Raise money for 
‚your business 


Sr sinessas are being hit hard by the Coronavirus. The country 
dge from racial inequality. Campaigns can help. Give your 
g suppart you and your business. 


E ib 


Bungalow made my move smooth and 
headache-free. Ics a rellef nor ro warry 
abour franring your róommoares rent 
or utilities 


Johray 


Speak 
with us 


Need support? Vía sra here to hein 
Click below to chat with us. 


= 


See repair status 


Loa in n»w to see when your repair will be completed 


Quiet your mind and Ease your pain and Sleep tight and wake 


calm the storm. soothe your joints. up refreshed. 


USE IMAGES WELL 


47 Try to show real people to trigger user's emotions 


5. If necessary, crop images to fit your message 


SS Solar Development 


We work at the forefront of responsible solar 
development. Fortner with us to develop innovative 


utility-scale solar. 


Learn More 


B 


Developers and Property Owners > 


Learn how our excerienced team can deliver 
solutions that let you maximize the value of 


your land. 


e Try to show real people to trigger user's emotions 


5 If necessary, crop images to fit your message 


6 Experiment combining photos, illustrations and patterns 


For every student, 
every classroom. 
Real results. 


We're a nonprofit with the mission to provide a free, world-class 


Acorns helps you 
grow your money 


ake contral with al 5575 
investment, retirement, checking and 


mre 


HANDLING TEXT ON IMAGES 


7 Method #1: Darker or brighten image (completely or partially, using a gradient) 


New year, New possibilities 


Invest in Yourself 
With a Wildist. . j 
Photography Workshop 


Get Started A 


Solar for Financial or 
Development Partners Solar For Propertv Owners 


HANDLING TEXT ON IMAGES 


7 Method #1: Darker or brighten image (completely or partially, using a gradient) 


8. Method Z2: Position text into neutral image area 


Model X 
kr Touches Delivery 


Campaigns 
Raise money for 
your business 


Trust Is Worth 
More Than Gold 


Soul, electrified. — 


Die neuen Tavcan Modelle. 


Method #1: Darker or brighten image (completely or partially, using a gradient) 
Method #2: Position text into neutral image area 


Method #3: Put text in a box 


—— | 


H 
NEN: GET THE LATEST 
i. | FROM THE WHITE 


l . House 
i = | Follow the Wh ~ouspenFasebock > 
* E l | del 
Origina 
* 

Masterpiece i x ! 

— —— a a 
BOP showhome - open Saturdays and Sundays 12-4 pm — TAR à 


Let Us Fill Your 
Glass with Jov 


To account for high-res screens, make image dimensions 2x as big as their displayed size 
& Scale factor: Actual pixels the screen contains / Pixels 
represented on screen 


© On high-res screens, scale factor is 2x or even 3x, on "norma 
screens it's just 1x (1 physical pixel = 1 design pixel) 


Design Discovery 

After learning about your goals, our dedicated 
team of interior designers distill your vision into 
various moodboards that represent your style 
preferences. 


3D Renderings 

Using measurements from tha digital scan, we 
create photorealistic 3D renders of your future 
bathroom using the same technology as movie 
studios. 


Plans 6 Permits > 

Our architects meticulously craft each detail 
from overall layout to the helght of your mirror. 
These electrical, plumbing, and tile layout 
drawings are submitted to your city for permit 
approval. 


Materials 

Our dedicated procurement team orders. 
inspects, warehouses, and coordinates delivery 
of your materials with your GC. 


Construction 

With your materials received In our warehouse. 8 
fully licensed and reliable Mace Certified 
Contractor will finish construction on-time. 


ji 


a0 To account for high-res screens, make image dimensions 2x as big as their displayed size 
& Scale factor: Actual pixels the screen contains / Pixels 
represented on screen 


«¿+ On high-res screens, scale factor is 2x or even 3x, on "normal" 
screens it's just 1x (1 physical pixel = 1 design pixel) 


Blurry image on 
high-res screen 


creata photorealistic 3D renders of your future 


bathroom using the same technology as movie F : E. $5, 
studios. R a 
: A. 
a . 
* . 
a] - z 


Q Design Discovery 

After learning about your goals, our dedicated 
team of interior designers distill your vision into 
various moodboards that represent your style 
preferences. 


O 30 Renderings 


Q Plans & Permits > 

Our architects meticulously craft each detail 
from overall layout to the helght of your mirror. 
These electrical, plumbing, and tile layout 
drawings are submitted to your city for permit 
approval. 


Looks okay on 
low-res screen 


» Materials 
Our dedicated procurement team orders. 
inspects, warehouses, and coordinates delivery 
of your materials with your GC. 


» Construction 
With your materlals recelved In our warehouse. a 
fully licensed and reliable Made Certified 
Contractor will finish construction on-time. 


SOME TECHNICAL DETAILS 


10° To account for high-res screens, make image dimensions 2x as big as their displayed size 
11. Compress images for a lower file size and better performance 


“£ TOOLBOX 


LE Unsplash 


[rA Pexels 
D Drawkit 


unDraw 


© sawosh 


To account for high-res screens, make image dimensions 2x as big as their displayed size 
Compress images for a lower file size and better performance 


When using multiple images side-by-side, make sure they have the exact same dimensions 


Ihe new IBM 715 FAM The hybrid cloud advantage ihe new [BM 715 FAM The hybrid cloud advantage 


Cloud without compromise, for businesses of Rapidly deploy access to critical applications Duild once, run anywhere, and adapt to change Cloud without compromise, for businesses of Rapidly deploy access to critical applications Build once, run anywhere, and adapt to change 
without compromise all sizes tor remote worktorces without compromise 


all sizes tor remote worktorces 


Learn more about the new IBM 715 sıngle 


Learn more about the new IBM 715 single 
frame system $ Register to qualify for a free 60-day trial > Find your hybrid solution ^ > 


frame system > Register to qualify for a free 60-day trial > Find your hybrid solution ^ > 
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FRAMEWORK 
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WEB DESIGN RULES #4: ICONS 


HTML 


e Use a good icon pack, there are tons of free and paid icons packs 


@ Regular ~ (2 Search 


“£ TOOLBOX 


Explore 
A, ds e eu <> [A] Countries 


Community 


” Dating 
MN — 
©) (jd o = = = Forum 


m Open Startup 


muro: 


Vote on photos 


YH FIRE calculator 


Canggu shortcut cam ICONS8 
T 4 € — MI Fastest growing 


& Escape the winter 


P Phosphor icons © You can just use 
emojis too 


and many, many more... 


e Use a good icon pack, there are tons of free and paid icons packs 


e Use only one icon pack. Don't mix icons from different icon packs 


ll) 


Mv product is hard to use 


Let's flatten the learning curve. 


o7 


My product has design debt 


Let's rethink and create a design system. 


V 


My MVP lacks polish 


Let's make it look and work amazing. 


EB 


My app and site don't get along 


Let's make your user journey sing. 


um — This icon has a 
at 


completely different 
My users’ productivity is low style: filled and 
Let's cet rid of repetitive tasks. boxy/sq uared 


Do 
OL 
My product has feature creep 


Let's kill your darlings. 


e Use a good icon pack, there are tons of free and paid icons packs 
e Use only one icon pack. Don't mix icons from different icon packs 


e Use SVG icons or icon fonts. Don't use bitmap image formats (.jpg and .png)! 


e 


S 


S 


& "Regular images”: JPG, PNG, GIF & SVG images and icon fonts 


Z- Do not scale, become unsharp! Z- Scale indefinitely! 


Use a good icon pack, there are tons of free and paid icons packs 


Use only one icon pack. Don’t mix icons from different icon packs 


Use SVG icons or icon fonts. Don't use bitmap image formats (.jpg and .png)! 


Adjust to website personality! Roundness, weight and filled/outlined depend on typography 


Secure 


Safeguard your agreements 


Legally binding 


Time-stamped proof file 


Hosted in the EU 
GDPR and elDAS compliant 


HAPPINESS GUARANTEE 


Love it, or it's on us. 


Try Feals risk-free 
No fuzzy haze 


All natural ingredients 


Trust our team of 
experts to deliver 


Ha 


Design consultants 

Our team can help you create your 
FF&E specification, keeping it on time 
and in budget. 


Installation 

On-site installation including 
assembly, positioning, snagging and 
packaging removal. 


One point of contact 


You have one point of contact — us. 
We'll handle every supplier and all 


the admin. 


Consolidated delivery 


We'll consolidate orders from multiple 
suppliers and deliver when required. 


WHEN TO USE ICONS 


57 Use icons to provide visual assistance to text 


Traditional multivitamins weren't doing us any favors, so we made one that will. 


Q 


Gluten and Major 


e P 


Traceable 
Nutrients 


B 


30 LIFE-CHANGING 
EXERCISES 


BASED ON SCIENTIFIC 
RESEARCH 


Based on data from: 


9.9B 


TICKETS 


Vegan Friendly 


Allargen Frae 


LI) 


3 GUIDED STAGES OF 
SELF-DISCOVERY 


E? 


DESIGNED AND BUILT 
FOR BEGINNERS 


486M 


CUSTOMERS 


© 


Non-GMO 


e 


No Artificial 
Colarants or 
Synthetic Fillors 7 


je 
Y = 
Y — 


SIGNATURE CHECK-IN 
TOOL 


OVER 500+ FIVE-STAR 
REVIEWS 


Cr 105M © 


AGENTS 


55M 


Trackable revenue generated 


Ô across oir portfelia 


A 
FA QA 


220% 


Average yearly growth rate across 
our lants 


Ly 


Glacier Discovery 


140 


COUNTRIES 


1T—O- > 
AJ — a 72 Are 
H "year - I-Znrs 

JA. 


“+X 


Increase in client creative cutgut 


on average 


G 


ANZI 


Easilv make notes on 
your documents 


» um Lent. _ 
— wi — 
PT d 
e 


| dm Drag and drop file transfer 


nd 3 8 
-O- Readable n sunlight 
F A x 


I^ PDF and ebook (ePub) support 


20,000 


COMPANIES 


1,300,000 


a 
~ 
Share 
information 


HIRES xx. En 
35,000,000 


CANDIDATES 


Brainstorm Solve a 
ideas problem 


N 


e Use icons to provide visual assistance to text 


6 Use icons for product feature blocks 


Private bedrooms 


From mastar suites to private nadromms, your 


room ie youre alone. 


Easy transfers 


Maving cities? Just give us a 30-day notior and 


we're here to heip 


Gets feedback from 
stakeholders. 


With Greenlight you can easily c 


the product version that your users 


" "A 
will 588. 


== 


Furnished spaces 


No mars Craigslist sofas. Common arsas came 


furnished, on us. 


fot 


Flexible leasing 


We offer 4-18 months Inases, herause life is 


crazy and things changa. 


D 


Works everywhere, 
even when you need to 


log in. 


It easliv Integrates with your 


workflow, without the need for any 


code ar website rterations 


Regular cleaning 


Professional monthly cleaners to kaep yaur spot 


epck and epan 


Lightning fast wifi 


Pre-installed WiFi networks maan you're ready 


to connect on cay one 


Share securily with 
team members. 


Greenlight makes sure that anything 


access design and security 


architectura stay tha same 


E 


Close to the metal 


From direct integrations with 
card networks and banks to 
checkout flows in the browser 
we oparata on and optimize at 


every level of the financial stack. 


b 


Fastest-improving platform 


Wa release hundreds of features 
and improvements each year to 

help you stay ahead of industry 

shifts. (On averaga, we dazlov 


our production AFI 15x per day.) 


c 


Battle-tested reliability 


Our systams operate with 


99.9%+ uptime and are highly 


scalable and redundant. Stripe 


Is certified to the highest 


complience stardards. 


v 


Intelligent optimizations 


Our machine learning models 
train on billions of deta points 
and help increase revenue 
acrass conversion, fraud, 


revenue recovery, end more, 


pa | i | t 
in ai 

Developer-first Extensible Enterprise-readv 

Oven-source SDKs with industrv-leading Build location-based experiences across the Built for scale, processing 100B- locations per 
accuracy, simple documentation, flexible APIs customer journev, from messaging to curbside year from 100M+ devices with enterprise-grade 


and turnkey integrations. 


Low minimums 


Order as few as 20 shirts to get your 
project started. 


PICKUP to address autoi 


BZ 
Lightning fast delivery 


Try our 2-day service and get your shirts 
oy February 12 


»molete security, privacy, 


and support 


Money back guarantee 


Count on us being on time with each and 
avery order. 


WHEN TO USE ICONS 


57 Use icons to provide visual assistance to text 
6. Use icons for product feature blocks 


7 Use icons associated with actions, and label them (unless no space or icon is 100% clear) 


œ) Ouvir agora @ Downloads 


Explore Explorar 
Courses Q Search 


Notifications Radio 
Let's get started > READ MORE 
| 9= Tutorials Æ Account 


Messages BIBLIOTECA 
Recentemente adicion... 


Bookmarks Pricing FF Licenses 
Intérpretes 


Lists Álbuns Instructor Mv learning Y, E N 
Follow us 


TUOOOYyYO Y 


Profile Músicas 


Use icons to provide visual assistance to text 


Use icons for product feature blocks 


Use icons associated with actions, and label them (unless no space or icon is 100% clear) 


Use icons as bullet points 


Caffeine keeps you alert. [1] 


x Collabaratian faaturas 


Harmful: Many energy drinks include harmful 
compounds like L-tyrosine and excessive amounts of 
sugar. [5] 


X Coffee contains helpful antioxidants. [2] 
Essential 
All the basics to get started Y Anxiety: Caffeine increases the body's stress hormone 
(cortisol). [3] 
29€ 
Killer! att Sleeplessness: Excess caffeine decreases sleep quality, 
Y requiring even more caffeine the next day for the same 
(2 S Users alertness. [4] 


AUTC-GENERA^ ON 
© Unlimited generations 
(P) 1000 banner exportsimanth 


©) B brand presets 


CREATIVE AUTOMATION 


Program Administration 
Blair handles all operational duties to facilitate the ISA 
program including the process of all applications, 


repayments and customer support. Lean back and focus 
an the education of your students. 


Regulatory Framework 
Technical Infrastructure 


Financing Solutions 


ie We partner closely with you. 


(2) 2 000 API cells/moath 
(A Zapier integration 
2 Dedicated support aver Slack 


Try for free w ATS miogratons 
wv Strategy meetings to hane in the search 


w^ Scheduling management 
v^ Weekly performance reports 
~ Consultation on job description and messaging 


KK kl Bl BI [8 [s] BI 


Sustainable aluminum bottle 

Only clean and natural ingredients 

No petrochemicals 

Saves clean water 

Renewable active ingredients 

Made locally with minimal outsoureing 
Reduces greenhouse gas emissions 


Proven to perform 


E 
So fast you'll never natica 
We optimise and deliver with 3 custam CON 


designed for high performanne ard stunning crisp 
visuals, 


V Ww 


Cost-effective 
At a fraction af the cost of traditional canstructian 


our pre-fab solutions create additions! space tor 
focused work and collaboration without constant 


noise, debris and d'straction. 


Inbox 
Starred 


Snoozed 


Sent 
Drafts 


Trash 


wm S V Ww O HD 


Important 


AQ- 


Mobile out af the box 
Your content adapts beat fit y te tablets and 


smartphone devices Content lands swifti; with 
mosie optimised assets. 


D 


Time Saving 


Thoughtful design ensures sm ple installation ina 


few hours or less. And, because our products are 
safety ensured, youll never have ta spend tiene or 
money chasing after permits, contractors, and 


more 


e 
Automatic dark made 


Every theme comes with the ability to match your ar 
your visitors preference and display as Baht or dark 
và ants, 


IX 


Flexible 


Unlike traditanal construction, our purpose-built 


products were designed to adapt with your 


workspace and can easily be positioned in various 


places throughout your office, or to an entirely 


neve location. 


provided by Investec Bank, FSCS protected 


VD 


Automated savings 
Our algorithm sets money aside Iittle-but- 
often, and Rourd Ups save às you spend 


Lost Money 


Get alerts f you're overpaying on bills, and 


switch to s cheaper supplier in seconds 


Unlimited withdrawals 
WitFdrew as often and as much you like, 


with no hidden charges 


P" 


Keep it stupid 


| like to keep my work simple, 
minimal with eye-catching details 


and stunning typography- 


Correctness 


Fliminate grammar, spelling, 
and punctuation errors. 


nm 


Link Banks 
Connect up to 3 
banks and their 


accounts 


+ 


Manual 
Manually add 
spencing for 

things like cash 


i 


Award-winner 


ll ba a future game changer 


e 


Claritv 


Lan 


y 


Automatic 
Up-to-date 
transactions and 


balances 


J 


Dark Mode 
Automatically 
adjusts with 
brightness 


Make every sentence 


concise and easy to follow. 


Not yet. But with a combination of 


winning attitude and high ambition 


9 To keep icons neutral, use same color as text. To draw more attention, use different color 


GÒ 


Keen to learn 


You know how to eat an elephant? 
Bite by bite. That's how | learn. One 


small thing. Every. Single. Day. 


A 

v o 
Engagement Appropriate tone 
Find vivid words to enliven Choose the right tone and 
each and every message. formality level, 


Lg 


Spending 
Smart ways to 
look at your 


recent spending 


Count 
Tap transactions 
to add up their 
amounts 


q 4 


Insights Fast 
See your daily Open directly to 
average and spending 
monthly in & out information 


e A 


Notifications Private 


Get a weekly Keep info secure 


reminder to check with Touch ID or 


spending Face ID 


9 To keep icons neutral, use same color as text. To draw more attention, use different color 


Native mobile apps 


Beautiful nativo iOS & Android apps that 
celiver a polished user experience. 


Digital platforms 


Snapoy digital platforms that balance 
content, commerce, and functionality. 


SaaS applications 


Fpaturc-driven applications in the cloud 
that are optimised for self-service. 


Design svstems 


Future-proof vour product with a design 
system that scales with your procuet. 


2 


2 


a0 Don't confuse your users: icons need to make sense and fit the text or action! 


A 
— 


Enterprise software 


Complex and robust software solutions 
that feel bespoke anc intuitive. 


Design audits 


A quick review or in-depth analysis of your 
product. Let's optimise! 


9 To keep icons neutral, use same color as text. To draw more attention, use different color 


a0 Don't confuse your users: icons need to make sense and fit the text or action! 


Tech that keeps you safe 


We support face & fingerprint ID, and Our customer support team is ready to 


kul Don't make icons larger than what thev were designed for. If needed, enclose them in a shape 


w 
& O 9 


Tech that keeps you safe Humans on hand Strong privacy 
We never share your data with any We support face & fingerprint ID, and Our customer support team is ready to We never share your data with any 
other parties without your consent. use 256-bit TLS encryption help you, 7 days a week. other parties without your consent. 


From master suites to private bedrooms, your No more Craigslist sofas. Common areas coma 


8 KD Icons were designed for big 
Regular clemiing use: lots of details, thin lines 


Professional monthly cleaners ta keep your snot 
spick and span. 


IN 


JONAS.IO 


SEHMEDIMANN 


SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES £5: 
SHADOWS 


HTML 


< After an era of 100% flat design, we're now back to using shadows in UI design (“flat design 2.0”) 


10:11 PM 9 100% = 


= Page title 


PRESSED PRESSED 


Input tex| 


Seppetes 


Notes Reminders Stocks Game Genter 


> 


Permissions 


Lorem ipsum dolor sit amet, 


QA: 


Newsstand iTunes Stam Ap Store Passbcck — - — ĉo eiusmoc tempor inc didunt.. 


consectetur ad pisic ny elil, sed 


on B E E 
+ > > > > 


BUTTON BUTTOK 


& [^] 


3 ^ 
4 


JO á 


DESIGN (MINIMAL) 


Still minimal, but brings 
back shadows and depth 
for better usability 


Z- After an era of 100% flat design, we're now back to using shadows in UI design (“flat design 2.0”) 


& Shadow creates depth (3D): the more shadow, the further away from the interface the element is 


= UL 


SIDE 
VIEW 


3D VIEW 


© Shadow can be used 
on boxes and text 


DISTANCE FROM SCREEN / INTERFACE 


a You don't have to use shadows! Only use them if it makes sense for the website personality 


Why Limepoy customers are almost twice as 
L mme 
Autumn — | 
Mauer Limepay. 
2020 The checkout 
that puts you 
yor ates back in charge 
€ :32.48 


PLAYFUL / FUN 


SERIOUS / ELEGANT 


Let's team up and design 
something remarkable 


Cur aqla z»z a. 1 pardas a poduct on. 
Wed rt en sw Ne ena ns 
a 1201 pajaca Th "+ of us M oat ch 294 12 Out 
(rà TMA ee Feet enn) e ores re 58 
ux sedan; Espa mem ħed; s tou y M caps Jom 
Us for ATANAS aeo secre 2t cur in 


Arlt ni o rr cer nir ¢ deu. 
o Szcad-72 poet pod. cticod wap 
o Felis mu ME um rd oov tm 


b Remo am In persas anınerı 


Ve: nei ahirna: TIU 


Helped get stakeholder buy-in, far 
an EdTach platform through a new 
user experience and visual refresh, 
in 6 weeks 


lads ! CO ara PCT ui aan 
habia let a howe u bls ih Ll nr mich 
MAT JUR ML SR ACA BAT San mar 
pem IPA vera n yt denn mi 
cr. im, L.) 220234. 


Sess Greer: 


za-kanżut b OLS ef T^ «em 


Ways we can help 


+ 


My ziccoctim tart to gi 
Lacs Reta Lov mb na core. 


o. 
a 


au 


Mr ares raro deri gm hbi 


1577 MEPA PA AT AA ANA 


Q 


Me MVP lochs pola 
E E 


ES 


Hr cop amd otc don wer sire 


LA I DELI 


x 


FT 


Mrunanr prodazjati a ks 
but get ác ol roo Xa athe 


nc 
oe 


Mr pradan han funtana creep 


Pk as 


r - 
Let's team up and design 
something remarkable 

(Cut ayk 1 upewe yra moia ort on 
Www alternar Il 120 x tata alka co Jra cerıne 
oO ar Trote ofn a oTt otm ean Ow 
paestamamn icsi cru mahe ral ja rindo 19 214 
mer wig En peer men dedos e. tea v nin 
wilu rad an: a ro cl uu opa: i 
Mames” z^ bor aryntereby v Jeo. 


[-] Ser pret ewm oc E ndn me 
e Mad bis wode^zew & dau cormurkerian 


e Ra vate a: Lice am voller 


LES Du 


Helped gel stakeholder buy-in, for 
an EdTech platform through a new 
user experience and visual refresh, 
in 6 weeks 


aa II N WANT 0 S0 
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Ways we can help 
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e Use shadows in small doses: don't add shadows to every element! 
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Wy NYP leza pont 
let ah, Riv aui veh cory 


ES 


My ge und ide siart apud er 
LOG UA AA ANN 


e You don't have to use shadows! Only use them if it makes sense for the website personality 
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en 


My aim producti; how 
Lais qat ridul voce ove MESA 


no 

€ fy 

Me avec at has heed ire arene 
Lore aw A 


e Use shadows in small doses: don't add shadows to every element! 


e Go light on shadows, don't make them too dark! 


Eo 9 9 © Sv Y Q Y 


Correctness 


Elimnate grammar, spelling, 


Correctness Clarity Engagement Appropriate tone 
Make avery sentence Find vivid words to enliven Choose the right tone and Elirrinate grammar, spelling, Make every sentence Find vivid worcs tc enliven Chocse the right tone and 
and punctuation errors. concise and easy to follow. esch and svery message. formality level. and punctuation errors, concise and easy to “ollcw. each and every message. formality level. 


Align Your Team With Your Company's Style Align Your Team With Your Company's Style 
wit" Grammarly Business, you can create a compeny style guide to keep 


With Grammarly 3usincss, you can create a company style guide to keep 
every team members Communication clear and or-brand. evary team member's communicatior clear and on brend. 


(Q oc en the support team, resobvina a customers issue. @ stock. on the support team, resotving a customers issue. 
Company Style Guide 
CHANGE Frou CHAWGE TO DtSCh?TIOS 
Ne aspreciate your business Pleise rate our We appreciate your business. Please rate our 
— QoS with this short survey, QoS with this short survey. 
Jàmá Longe aros Legh 
Gramnerty 


e You don't have to use shadows! Only use them if it makes sense for the website personality 


e Use small shadows for smaller elements that should stand out (to draw attention) 


jo 


Predietive Insights 


Using anomaly detection, Narrative B!'s proprietary 


algorithms generate meaningful insights for the user 


without the click of a button. Narrative Bl uses time-series 


A Christina - Support 


"As usual, Capsule go over and beyond 
to help with any query!” 


Sian Carter 


Director of Operations at 


A Natural Language Processing 
^ 


Narrative Bl speaks your language. Through our patent- 
pending Natura! Language Generation Engine, users can 


receive insights described in plain English. 


Your work email Learn more 


Enter your work email address 


Learn More 


Launch your ISA 


C 
U 
o 9 o 
Dashboard SDK 


Configure geofences anc visualize Open-source iOS, Android. and web 


analyze, and segment your location SDKs that make adding location to 


data your apps simple 


Everybody has a unique 
story to tell, and UGV 
allows you to do that, and 
it is still professional 
storytelling at the end of 
the day! 


Scott DeFillipo e 


MAT Ai 


Retail Banks 


Seenit presents a huge 
opportunity for us, both for 
our employees and with 
the outside world 


Laura Turkington di 
Vodafone 


Commercial 
Banks 


USE SHADOWS IN THE RIGHT SITUATION 


4 Use small shadows for smaller elements that should stand out (to draw attention) 


9 Use medium-sized shadows for larger areas that should stand out a bit more 


o F 


| Powerful fraud protection | Compliance made easy 


Checkaut uses machine learning to helo you distinguish Qualify for the simplest method of PCI validation with a pre- O O 
fraudsters from customers. Apoly extra authentication to filled SAQ A, and easily meet new regulatory requirements 
high-risk payments, or let us take on fraudulent disputes like Europe's Strong Customer Authentication. 


TE kati - 
We've been filling positions a lot faster 

entirely with Chargeback Protection. AP l 

because our managers are now involved 


Nava rro red uces in the hiring process. So far we've made 


ti me to hi re by 150 hires in 6 months and we've reduced 


our time to hire from 50 days to 26. 


i Ja Lesher 
€: son s 
u : VP of Talent Acquisition, Navarra 


50% 


“Throughout my 20 years in e-commerce, checkouts were the 
last thing you wanted to touch and the first to go down. With 
Stripe Checkout we don’t maintain this ourselves anymore. | 


z A S PL SEC MORE CUSTOMER STORIES > 
can't emphasize enough how big that is. 


Bryan Mahoney. Co-Founder & CTO 


\ 


Forbes E] TRYANAIR moodle SEPHORA 


SOHO HOUSE JOEY RESTAURANTS 


e bevi 


arfa host SIB Glitcl NN /o ME 


Why coaching should be 
available to every 


$ ACCORPLUS 
FX 


e Use small shadows for smaller elements that should stand out (to draw attention) 


5 Use medium-sized shadows for larger areas that should stand out a bit more 


Why Workable Product » Customers Pricing Login 


Feeling Ae 
P CCLI Ceo 
' C 7 f 


As tha most axiensive travel, dinna gnd 


wanted a ative zayınank solution Ural 
works for ow brand We worted the 
ability to offer cur merito fullrange 
of payment options without bouncirg 
them o ‘hind party sottormra ard 
seciárng then te siga im ta wher 
aocourts : and Limepaw delvers thot 
veifeuily’. 


Way ve Srevewvud 
Vive Pus fur la Pouf Accu Plus 


EB schwa: loo«ngtolnncwote. VER the 
tanur for BINPL increasing, we work Lo 
offer ou Gustarners a woy ta ergope 
dir2othy aithus when they transact. 
Lirmepay'e wivte- label cffering ic unique 
ond beens customers on cur site.” 


Shane Stockwell 
Senior Directa, EE Gamo: 


Food the tory — 


We decided to imdement Limepay to 
tes. Ube y pol veis we bud develuped 
and we v atanded with errada In 
our first four wook: wthLmepay, wc cow 
irproved Sacket exor y 120 and a 
reduced checkout abandorment rte of 
3095. crowing our everage oh nern i 
by over FRA 


Mio Hucson 
Drector Feeling Sexy 


Food tho case study — 


your business. 
Contactsales > 


Deutsch 

English (United States) 
English (United Kingdom) 
Español (America Latina) 
Español (España) 
Francais (France) 
Francais (Canada) 


Bahasa Indonesia 


Italiano 

EX 

Portugués (Brasil) 
¡as 


SOLUTIONS COMPANY 


ment TA Community Solar > 


CS Project Services 


CS Sales Partners 


) Cl SS Solar Development > 


a | Property Owners 


Our Projects 


PAI 


ar developers, working to deliver savings to 


RESOURCES 


SOLAR DEVEL 


e Use small shadows for smaller elements that should stand out (to draw attention) 
5 Use medium-sized shadows for larger areas that should stand out a bit more 


6 Use large shadows for elements that should really float above the interface 


Open your bank account 
in just 5 minutes: 
First Name 
Last Name 


Email Address 


Use small shadows for smaller elements that should stand out (to draw attention) 
Use medium-sized shadows for larger areas that should stand out a bit more 


Use large shadows for elements that should really float above the interface 


Experiment with changing shadows on mouse interaction (click and hover) 


LOG IN TO BOOK TOUR LOG IN TO BOOK TOUR 


u 


Medium-sized shadow "pulls" omaller shadow "pushes" J 


button closer to the user button back into the interface 


Use small shadows for smaller elements that should stand out (to draw attention) 
Use medium-sized shadows for larger areas that should stand out a bit more 

Use large shadows for elements that should really float above the interface 
Experiment with changing shadows on mouse interaction (click and hover) 


Bonus: Experiment with glows (colored shadows) 


REQUEST A DEMO Create your site > Start playing > Your email address 


IN 
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WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES #6: 
BORDER-RADIUS 


HTML 


a Use border-radius to increase the playfulness and fun of the design, to make it less serious 


Autumn — 
Winter 
2020 


characterizes the Autumn 
Winter collecton 


LOOKBOOK > 


——— 


SERIOUS / ELEGANT 


@® PARASUT ikas 
Flawless Accounting 


Integration! 


ikas is fully integrated with the best accounting software for 
your wholesale and accounting operations! 


Stock El Daily [3 Order 
Syncronization zu Sale Reporting Tracking 


PLAYFUL / FUN 


e Use border-radius to increase the playfulness and fun of the design, to make it less serious 


e Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


54 Community Solar 


Breaking down barriers to solar benefits. 
Homeowners, businesses, and towns can enjoy 
savings by signing up for o community solar share. No 


rooftop panels required! 


a 


Start Deploying Get a Demo 


©, Community Solar Project Services > 
You develop the project, let our team acquire 
and m ge the customers. 
Vercel combines the best developer experience with an obsessive focus on end-user performance. 
9, Community Solar Sales Partners > 


Our platform enables frontend teams to do their best work. 
Broaden your customer base with access to 
the solar solution tor more people i^ more 


places. 


Boxy/squared typeface, but designers wanted 
to add some playfulness, so little border-radius 


Very round typeface, lots of border- 
radius in button, icons and image 


e Use border-radius to increase the playfulness and fun of the design, to make it less serious 
e Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


e Use border-radius on buttons, images, around icons, standout sections and other elements 


| . Your work email Learn more 
Enter your work email address Get a demo EN 


Add to Chrome DOWNLOAD APP Get Started = Get My Records 


LEARN MORE 


REQUEST A DEMO 


Helped get stakeholder buy- 
in, for an EdTech platform 
through a new user 
experience and visual refresh, 
in 6 weeks 


How to Build a Solar Farm 


Press 


Feeding Families in Need: Ren 
Energy Companies Enter the N 


How the Seasons Affect Comr 
Solar 


e Use border-radius to increase the playfulness and fun of the design, to make it less serious 
e Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


e Use border-radius on buttons, images, around icons, standout sections and other elements 


Ytrulia 


Under the Hood at Grammarly: Inspiring Trust and Maximizing Clarity: 


Transforming Writing Style with Al Why Trulia's Editors Rely on Grammarly 
lake a deep dive > Get inspired > 


USE BORDER-RADIUS WELL 


1 Use border-radius to increase the playfulness and fun of the design, to make it less serious 
2. Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


3. Use border-radius on buttons, images, around icons, standout sections and other elements 


= 
Pa wa 
, 


o 
A 


x 


- 


Boost productivity 


Increase confidence 


Scale your product 


Gets feedback from 
stakeholders. 

With Greenlight you can easily collate 
feedback fram those who matter on 
the product version that your users 
will see 


n 


Tech that keeps you safe 


We support face & fingerprint ID, anc 


use 256-bit TLS encryption. 


Works everywhere, 
even when you need to 


log in. 


t easily integrates with your 


workflow, without the need for any 


O 


Humans on hand 


Our customer support team is ready tc 


help you, 7 days a week 


Share securily with 
team members. 


Greenlight makes sure that anything 
behind a logın is protected and your 
access design and security 
architecture stay the same 


g 


Strong privacy 


We never share your data with any 


other parties without your consent. 


Q 


Transaction Transparency 

We believe in transzarercy and fully validated transactions. That s 
why every ime you lor vour customers) choose to offset an 
emissicn-producing activity with Cloverly, we provice real-time 
rensactional cata to snow the location, type, and amount of 


carbon offset 


ææ 


Verified Sources 


I3 effectively neutralize carbon emissions, we know that cual ty 
matters. That's why Clover y works with reputable, imermetionally 
recognized suppliers who track and verify registared carbor 


offset projects 


Use border-radius to increase the playfulness and fun of the design, to make it less serious 


Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


Use border-radius on buttons, images, around icons, standout sections and other elements 


Would you like to see Narrative 
Bl in action? 

Leave your email address to discuss how 

your company can get first actionable 


insights today 


a demo 


Start your free trial 


| you | , 
Join over 50,000 creative entrepreneurs and 
. Free id-daw biel. Na credit cara required 
start selling more today. 


What Activities Will You Offset? 


Neutralize your carbon footprint with the 


Cloverly API. 


Try Cloverty 


USE BORDER-RADIUS WELL 


1 Use border-radius to increase the playfulness and fun of the design, to make it less serious 


2. Typefaces have a certain roundness: make sure that border-radius matches that roundness! 


3 Use border-radius on buttons, images, around icons, standout sections and Other elements 


Add dates for prices * 5.0 (12) 


CHECK-IN CHECKOUT 


Add date Add date 


GUESTS 


1 guest v 


Check availability 


m. 
y) 


LINEAGE | 


_ Integrate your shop 


Set up your shopping cart 
using Shopify and many 
other stores to integrate with 
our fulfiliment system. 


d €» cox 
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WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES #7: 
WHITESPACE 


HTML 


© The right amount of 
whitespace makes designs 
look clean, modern and 


polished 


< Whitespace communicates 
how different pieces of 
information are related to 
one another 


< Whitespace implies invisible 
relationships between the 
elements of a layout 


The leading geofencing 
platform $, 


y pluack 3 9 ling I search 
v l 
GET STARTED 
M44 lear 


— Ti? . 
Developer-tirat Extensible Entarpr 33-readv 


Build location-based experiences across 
the customer journey 


z Dia”, 
9 “ag pt A y 
Q €— i 0 y l $ 
l Med "pa 
c O ro 
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On the way to a ocutlo 
" Irpt'a-ck ng 
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Looks a lot more polished, 7 


like the design has space 
to breathe 


] 
The leading geofencing l 
platform am 
li y EA 
ca -- 
m d 
Developer-first Cxtensible Enterprise-ready 


Build location-based experiences across 
the customer journey 


Trusted by thousands of developers, 
processing 100B+ queries per year 
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& Use tons of whitespace between 
sections 


A Radar 


moket kitom Dim Prong 


The leading geofencing 


platform 


Build ocation-based app expeñsnoes faster and graw reverue wth 
SDKs enc A?ls lor qeotenc nc, tip tracking, asoscding, ens search. 


On an! Crear me oe imam 


Developer-first 
Upen ature SUFE: with rdurry mide y 


ao3u'a0y, mls desamimaber, Sex ble Wis 
and tumhe, ategerttens 
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Build location-based experiences across 


Search ng for locations 


the customer journey 
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Trusted by thousands of developers, 
processing 100B+ queries per year 


Dashboard 


Cure cesteaces and viiam, 
anal, ard aagıromt vou horden 
dats 


PEW DOGL MEN "ANON 


SDK 


Open scune 108. Andeosd anc ath 


30% deo mate er ing kooien in 


your apps praia 


MU MAA LJ 


Eond Ra dr events io offer rrabema 
ve rebrrachs aa ow aber 


MEW INIEORAT OFS 


& plum Save met — Reduce Bills — Hep — Cawen 


The Al assistant - 
that grows vour 


£181982 
money. € 
.. I 
B - M alin i 
Set mora money aside, inves: in what matters to you = o m ~ 
and seve or billa. Get started fer free in 2 minutes. —— a M" 
> = —— 
: ^ = f > e LII 
@ App Store Google Play ow € 


e Use tons of whitespace between uu a e 


Capita! at risk when investng 


sections 140px 


Bank, meet Plum. 


Give your bank a brain. Plum uses the latest technology l l l 
to help you be better o'f, effertiessiv. Go on, give 
yourself a high-five f 


Link your bank(s) Plum automatically sets money Be better off 
Plum analyses your transact ons dalty asido Plum helps you set aside NOQG, invest 
10 learn about your income and Every iew days, Plum does the maths and steps you baing overcharged on 
spendng and transters the perfect amount from bills 
We suppert all major UK banks > your bank account. Little by litte, it 
edds un 
0- "- 
AT m (09 
ta gradwat en 3 
vw ave 
€ 


automatically -e 


Jur smart aigcritim analyses your spending and 
helos you save without even thinking about it @ You 
car also earn up to 0.40% Interest (AER). 


(o) Learn more about our Account + 


£350m+ 11.92% £179/year 


set asde by 1 milica* people across Avg. annual return las! 5 vears across Averace saving: per Castamar on 
the UK all Plun investment funds (Jan 21) segular bills 


Learn more Learn move Learn nove 


Use tons of whitespace between 


sections 


Use a lot of whitespace between 
groups of elements 


Bank, meet Plum. 


Give your bank a brain. Plum uses the latest technology 


yourself a high-five y 


ink your bank(s) 


Plum analyses your transactions daily 
o learn about your income and 


o help you be better off, effortlessly. Go on, give 


Plum automatically sets mone 
aside 

Every few days, Plum does the math: 
and transfers the perfect amount fro 
your bank account. Little by little, it 


adds up. 


Be better off 


Plum helps you set aside more, inves 
and stops you being overcharged an 
bills. 


Increase conversions by cunnecling customers with nearby places and 


Search and geocoding APIs + 

Flexible and affordable geocoding, search, and 
distance APIs with high-quality address and 
place data. 


3 minutes 


Build location-based experiences across 
the customer journe 


Searching for locations 


* 


- Q restaurant 
A 


, HF dim My 


On the way to a location 


tracking and liva ETAs 


Trip tracking + 

Everything you need to build delivery, curbside 
pickup. order-ahead, and location sharing 
features. 


Use tons of whitespace between 
sections 


Use a lot of whitespace between 
groups of elements 


What makes Narrative Bl so unique? 
Popular tools on the market either require specialized skills to make you or 
your team members work for deep unbiased analytical insights, while 


Narrative Bl brings them right to you. 


Predictive Insights Natural Language Processing 


Using anomalv detection, Narrative Bl's proprietary Narrative Bl speaks your language. Through our patent- 
algorithms generate meaningful insights for the user pending Natural Language Generatian Engine, users can 
without the click of a button. Narrative Bl uses time-series receive insights described in plain English. 

analysis to discover key trends from historical data to 


predict future outcomes. 


Something for everyone. 


Choose the strength that works best for you or 
try them all with the Feals Flight. 


1200 MG 2400 MG 
5134.95 $244.95 


Best Seller 
sir d Ar de * 2080 Reviews 


Qur mast popular product packs twice the amount of CBD 
in the same conveniently sized bottle. 


Learn More 


$134.95 | Get Monthly & Save 5095 


Use tons of whitespace between 
sections 


Use a lot of whitespace between 
groups of elements 


Use whitespace between elements 


~ 


Best Seller 


Á Md de dí dí 2080 Reviews 


Our most popular product packs twice the amount of CBD 
in the same conveniently sized bottle, 


$134.95 | Get Monthly & Save 30% 


A 
© 
a 


"2 


Bank, meet Plum. 


Give your bank a brain. Plum uses the latest technology 
to help you be better off, effortlessly. Go on, give 
yourself a high-five y 


1 Link your bank(s) Plum automatically sets money 
Plum analyses your transactions daily aside 
to learn about your income and Every few days, Plum does the maths 
spending. and transfers the perfect smount from 
5 We support all jor UK banks > your bank account. Little by little, it 
adds up. 
Searching for locations 


Increase conversians by connecting customars with nearby places and 


things. 


Q 


Search and geocading APIs + 


Flexible and affordable geocoding, search, and 
distance APIs with high-quality address and 


place data. 


—— 
— 
— 


4 


~ 


E 


9 


Be better off 
Plum helps you set aside more, invest 
and stops you being overcharged an 

bills. 


d 


P x . t 


^ O restaurant] 


l 


m an m 


EI, 
Auc. 


Use tons of whitespace between 
sections 


Use a lot of whitespace between 
groups of elements 


Use whitespace between elements 


Inside groups of elements, try to 
use whitespace instead of lines 


SOLUTIONS COMPANY 


Community Solar > 


CS Project Services 


CS Sales Partners 


Solar Development > 
Property Owners 


Our Projects 


SOLUTIONS 


Community Solar > 
CS Project Services 


CS Sales Partners 


Solar Development > 


Property Owners 


Our Projects 


e The more some elements (or groups of elements) belong together, the closer they should be! 


The "Law of € 


Proximity” 


No separation between 
elements, confusing spacing 


Title and text belong 
together, therefore there is 
less space between them 


Developer-first 

Open-source SDKs with industry-leading 
accuracy, simple documentation, flexible APIs, 
and turnkey integrations. 


Developer-first 


— 


Open-source SDKs with industry-leading 


accuracy, simple documentation, flexible APIs, 


and turnkey integrations. 


| =| 

TIT 

Extensible 

Build location-based experiences across the 


customer journey, from messaging to curbside 
pickup to address autocomplete. 


Extensible 


Build location-based experiences across the 
customer journey, from messaging to curbside 
pickup to address autocomplete. 


Ambiguous spacing. 


What field do labels Contact support 
belong to?! 
Question 
Select your question... v 


Tell us more—how can we help? 


Your email address B 


Contact support 


Question 


Select your question... 


Tell us more—how can we help? 


Your email address El 


Send email 


e The more some elements (or groups of elements) belong together, the closer thev should bel 


Each label clearly 
belongs to a certain 
input field 


<> 


Why is the button 


section? 


closer to the lower 64 Community Solar 


Breaking down barriers to solor benefits. 


Homeowners, businesses, and towns can enjoy 
sovings by signing up for a community solar shore. No 


rooftop panels required! 


[o 


[o 


Community Solar Project Services > 

You develop the project, let our team acquire 
cnd manage the customers. 

Community Solar Sales Partners > 


Broaden your customer base with access to 
the solar solution for more people in more 
places. 


e The more some elements (or groups of elements) belong together, the closer they should be! 


Button seems to 
belong to text block, 
so it's closer 


64 Community Solar 


Breaking down barriers to solor benefits. 
Homeowners, businesses, and towns can enjoy 
sovings by signing up for a community solar shore. No 
rooftop panels required! 


Community Solar Project Services » 


[o 


You develop the project, let our team acquire 
end manage the customers. 


&, Community Solar Sales Partners > 


Broaden your customer base with access to 
the solar solution for more people in more 
places. 


& Too much whitespace looks detached, too little looks too crammed 


7? a 


Everything 
is detached 2 


Boost productivity 


Make your product more valuable ta your users 
by boosting their productivity through 
optimised UX. 


Increase confidence 


Seam ess UX and sleek UI increases customers' 
confidence in your application's ability as a 
whole. 


Scale your product 


Rapidly scale up your product without 
sacrificing quality by implementing 2 design 


system. 


Boost productivity 


Make your product more valuable to your users by 


boosting their productivity through optimised UX. 


Increase confidence 


Seamless UX and sleek Ulincreases customers 


confidence in your application's ability as a whole. 


Scale your product 
Rapidly scale up your product without sacrificing 
quality by implementing a design system. 


Way too crammed 
and uninviting 


> 


e The more some elements (or groups of elements) belong together, the closer they should be! 


6 Start with a lot of whitespace, maybe even too much! Then remove whitespace from there 


Boost productivity 


Make your product more valuable to your users by 
boosting their productivity through optimised UX. 


Increase confidence 


Seamless UX and sleek Ul increases customers’ 


confdence in your application's ability as a whole. 


Scale your product 
Rapidly scale up your product without sacrificing 
quality by implementing 4 design system. 


Just right, design 
can breathe 


The more some elements (or groups of elements) belong together, the closer they should be! 


Start with a lot of whitespace, maybe even too much! Then remove whitespace from there 


& Too much whitespace looks detached, too little looks too crammed 


Huge text, lots of 
whitespace 


We partner with 
venture capital 
firms and angel 
investors to 


make sure their ° “tr. 


startups cut O Brand emy 
through. a 
By taking the founder's vision arc turn nq this 
narrative, we help tham tind their O Photography 
he work. Our proc has b d 
and the results have O Animation 
* Helped our clients ralse $200 m 
Grow teams of 2 up to 200 O Vape Pontaztion 
Raveived o 20 múllica med l 
— Ou Cliant 
— Dur Story 


F 


A 


, 
e f Ja 


Match other design choices. If vou have big text or big icons, vou need more whitespace 
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Small text and 
images, less space 


The more some elements (or groups of elements) belong together, the closer they should be! 


Start with a lot of whitespace, maybe even too much! Then remove whitespace from there 


& Too much whitespace looks detached, too little looks too crammed 
Match other design choices. If you have big text or big icons, you need more whitespace 


Try a hard rule, such as using multiples of 16px for all spacing 


2px M 


4px 
8px 
12px 
16px 
24px 
32px 
48px 
64px 
80px 
96px 
128px 


IN 


JONAS.IO 


SEHMEDIMANN 


SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES #8: VISUAL 
HIERARCHY 


HTML CSS 


Visual hierarchy is about establishing 
which elements of a design are the most 
important ones 


Visual hierarchy is about drawing attention 
to these most important elements 


Visual hierarchy is about defining a "path” 
for users, to guide them through the page 


We use a combination of position, size, 
colors, spacing, borders, and shadows to 
establish a meaningful visual hierarchy 
between elements/components 


Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


* 5072 .Z5uperhost . Sesimbra. Setubal Portugal f, Share Saved 


Tiny house hosted by Eco-Lodge Villa Epicurea - 
4 guests - 1 hedroom - 3 berds -7 bath te) 


{at Entire home 
You ll have the tiny house ta yourse 


<> Enhanced Clean 
Ir 5 ost committed ti 


x Eco-Lodge Villa Epicurea is a Superh 

- Superhoats are experienced. highly meter You won't ba charged yet 

€106 x 2 nights 

E Free cancellation until 3:00 PM on Má vice fee 
After thet, cancel before 3 00 PM on Mar d anc ge 
service fee Get details 


| 2] House rules 
— P 


| "15 chce is Surtable FC 
detalls 


Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


* 5.0 (12) : 7 Superhost : Sesimbra, Setubal, Portuga (dj Share Y Saved 


Z- Visual hierarchy is about establishing 
which elements of a design are the most 
important ones 


Z- Visual hierarchy is about drawing attention 
to these most important elements 


Z- Visual hierarchy is about defining a "path" 
for users, to guide them through the page Tiny house hosted by Eco-Lodge Villa Epicurea e €106 / right k 5002 


4 quests - 1 bedroom - 3 beds 1 bath 


«i 


CHECK-IN EHEEXDUT 
3/10/2021 3/11/2221 
fa) Entire home GUESTS T 
You ll have the tiny house te yourse l guest 
e e e e e 
< We use a combination of position, size, d licen "E 
This host committed to Arbab's 5-step enhanced cleaning proc Learn more di^. 
colors, spacing, borders, and shadows to Q Eco-Lodge Vile Epicureais a Superos formt beckon yet 
I I I — iii are experienced. highly rates hosts who are committed to providirg great stays “cr €106 x 1 night €105 
: . e . m Serv cef €0 
establish a meaningful visual hierarchy Fi ral — > 
ee — 3:00 PM on Mar 10 and get a 50% refund, minus the first nigrit end -— — 


between elements/components 


*% paportthis listing 


=] House rules 
This olace isr't suitable For infants (0-2 yrs) and the host doesn’t allow parties or smoking. Get 
details 


Visual hierarchy is about establishing 
which elements of a design are the most 
important ones 


Visual hierarchy is about drawing attention 
to these most important elements 


Visual hierarchy is about defining a "path” 
for users, to guide them through the page 


We use a combination of position, size, 
colors, spacing, borders, and shadows to 
establish a meaningful visual hierarchy 
between elements/components 


Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


i Po narka~ l ; z 
$ 5.0 (12) - $ Superhost - Sesimbra, Setubal, Portugal 


Tiny house hosted by Eco-Lodge Villa Epicurea 


A guests +1 bedroom - 3 beds ' bath 


Entire home 


You ll have tre tiny house to yoursel? 


ta 
<> Enhanced Clean 


This host committed to Airbrb's 5-step enhancec clearing process. Learn more 


S Eco-Lodge Villa Epicurea is a Superhost 
Superhosts are € FTIE 
guests 


er. Free cancellation until 3:00 PM on Mar 5 


After thet, cancel be*ore 3:00 PM on Mar 12 snd get a 50% refund, minus the Frs: night anc 
serViCe tot 


rvice fee Get details 


E House rules 


c isn't suitable for infants (U 2 yrs) and the host doesn t allow parties or smoxira. G 


ne place is 
detalls 


"xperienc ex, h xj ?ly ated hasts who are committed to c rovic i Jen stays CH 


d, Share Y Saved 


ill Show all photos 


€106 /naht * 50 12) 
CHECK IN CHECKOUT 
3/10/2021 3/11/2021 


GUESTS 
1 guest M 
Reserve 
You won't be charged yet 
€105 x1 night €106 
Service fes €0 
Total €106 


Report this listing 


roduct Integrations Resources 


Most important title, 


ww ~, Te only all-in-one 
ahalytics tool for 


Most important Prove the ROI of social media, plan more engaging content, and 


call-to-action, close create automated white label analytics reports. 
to top of the page Ds Y 


Ge$ started for free > 


e Position important elements closer to the top the page, where they get more attention 


ATTENTION FLOWS 
DOWN THE PAGE 
(AND COMPONENTS) 


VISUAL HIERARCHY FUNDAMENTALS 


1 Position important elements closer to the top the page, where they get more attention 


2. Use images mindfully, as they draw a lot of attention (larger images get more attention) 


64 Community Solar 


pretty.mutts Message av veo. 


Breaking down barriers to sgar benefits. 


Homeowners, businesses find towns can enjoy 


6 posts 78 followers 52 following 
savings by signing up ff a community solar share. No 
ooftop panels r d! did un 
Stylish, eco-friendly and vegan dog accessories. 
wi Handmade in Portugal 
Q Worldwide shipping 
Mw We donate to loca! dog shelters 
+ Shop now 
www.etsy.com/shop/prettymutts 
HH POSTS | TAGGED 


9, Community Solar Project Services > 


You develop the project, let our tec m acquire 
and manage the customers. 


Community Solar Sales Partners > 


[o 


Broaden your customer base with access to 
the solar solution for more people in more 


places. 


e Position important elements closer to the top the page, where they get more attention 
e Use images mindfully, as they draw a lot of attention (larger images get more attention) 


e Whitespace creates separation, so use whitespace strategically to emphasize elements 


More than 
ID, a designer 


Redesk Keep it stupid Award-winner Keen to learn 
fervor 1 


And mary more features coming s30n to Premium 


Work hard Play hard 


= 


Confusing! No hierarchy 
at all 


Increasing font size 


Increasing font weights 


Lightening color of less 
important text. Perfect! 


e For text elements, use font size, font weight, color, and whitespace to convey importance 


Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


* 5.0 (12) . $ Superhost . Sesimbra, Setubal, Portugal 


Y 
Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


* 5.0 (12) . $ Superhost . Sesimbra, Setubal, Portugal 


Y 
Eco-Villa Garden Pool & Sea View (Villa Epicurea) 
% 5.0 (12) . $ Superhost . Sesimbra, Setubal, Portugal 

Y 
Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


* 5.0 (12) . Y Superhost . Sesimbra, Setubal, Portugal 


e For text elements, use font size, font weight, color, and whitespace to convey importance 


inspect Designs 20px 


Copy-paste code & specs and exportany 
asset 


Learn More > 


a Kevin Bell 
UX Developer at Techmates Group 


"With Avocode, our devs can easily access 
all elements within design source files 
without forcing designers to prepare 
ayers in Sketch." 


Confusing! No 
hierarchy at all 


Inspect Designs -20px 


Copy-paste code 
& specs and export 
any asset 


UX Developer at Techmates Group 


"With Avocode, our devs can easily access all elements 
within design source files without forcing designers to 


prepare layers in Sketch." 14px 


- Increasing font sizes 
and adding whitespace 


Inspect Designs 


& specs and export 
any asset 


Learn More > 


Ks Baldesikueirsikbodbt 


tbenptlteciadd ett 
vin Bell "2 J 


Ke 
UX Developer at Techmates Gr 


"With Avocode, our devs can easily access all elements 
within design source files without forcing designers to 


prepare layers in Sketch." 


Adding font weight 
and color. Perfect! 


VISUAL HIERARCHY FOR TEXT ELEMENTS 


4 For text elements, use font size, font weight, color, and whitespace to convey importance 


1— 2» -— EA 


y to 
3 $ | 
X che battery life 


Ley 
— 


iscover Your Strength 


L^ 
A 
NL 


reMarkable 2 


reMarkable 1 


Estimated batterv life improvement 


Eve-catching 
background color 


Let's team upyand design 
something remarkable 


Our agile process superchargaAk your product design. 


on over the course 


Your email address 


Designed a seamless journey 
across digital And real-world 
touchpoints for Heineken, in 6 
weeks 


We have had g great experience working 


with Heavyvfeight. They elevate UX/UI 
quality wi Me keeping in mind strategic 
objectivgs. | would highly recommend 


with them. 


> eror 


Nice and subtle 
background color to 
make content stand out 


e For text elements, use font size, font weight, color, and whitespace to convey importance 


5 What text elements to emphasize? Titles, sub-titles, links, buttons, data points, icons 


& You can also de-emphasize less important text, like labels or secondary/additional information 


Title —— Eco-Villa Garden Pool & Sea View (Villa Epicurea) 


Icon ———» x 5.0 (12) . Y Superhost . Sesimbra, Setubal, Portugal «———— Link 


N 


Data point 


Icon —— ER » 


Sub-title —— Close to the metal 


Fastest-improving platform 


x direct integrations with We release hundreds of features 
Link card networks and banks to and improvements each year to 
checkout flows in the browser, help you stay ahead of industry 
we operate on and optimize at shifts. (On average, we deploy 


every level of the financial stack. our production API 16x per day.) 


De-emphasizing additional information 


T 


| Battle-tested reliability 


Our systems operate with 
99.9%+ uptime and are highly 
scalable and redundant. Stripe 
is certified to the highest 
compliance standards. 


Sub-title — HAPPINESS GUARANTEE 
Title —> Love it, or it's on us. 


/^ Try Feals risk-free 


icon ——> 


Sub-title 
B No fuzzv haze 


7 All natural ingredients 


e For text elements, use font size, font weight, color, and whitespace to convey importance 


5 What text elements to emphasize? Titles, sub-titles, links, buttons, data points, icons 


& You can also de-emphasize less important text, like labels or secondary/additional information 


Important 
Sub-title ——— —————— —» INTEGRATED data points 
Based on data from: 
Access a complete payments platform with 
simple, pay-as-you-go pricing e = 
Important Icons — 1t 35B 2e 486M (> 105M 
A Ta TICKETS CUSTOMERS AGENTS 
data points 14% + €0.25 29% + €0.25 NS 
7 for European cards for non-European cards De-emphasizing label 
De-emphasizing 
additional information & Everything you need to manage payments 
| M» Get hundreds of feature updates each year pretty. mutts Message my = ud 
Icons *  Nosetup fees y fees idden fees 
setup fees, monthly fees, or hidden fees Data 


point — 6 posts 78 followers 52 following 


Very subtle button AA 
(focus is on prices) — GET STARTED IN MINUTES > De-emphasizing buttons (on 


instagram, all focus is on photos) 


SL Lattice 


See whatthey're saying — 


We discover 
candidates you 
actually want to 
talk to. 


Dover uses a robust callbraticn process to deeply 
understand your requirements. 


Then, our system evalua'es prospective candidates 
on 50+ data points so we can find qualfied 
candidates who are the bost possible fite. 


BANC 


CÈ) BRILLIANT 


Stripe Is the leader in the Forrester Wave™ 


Stripe was rated the Mghest scoring out of ten | 4.0/5.0 | 42/50 
global payments provid&s—recognized for its 


Product offering rating Strategic vision rating 
feature-rich platform, scal® and speed of 


innovation. 


Read the report > 


With Stripe's reliable and developer-friendly tools, Glossier's 


engineering team is freed up to focus on product and 


customer experiences. Glossier. 


lyft ae slack Glossier. charity: v 


6 Emphasize an important component using background color, shadow, or border (or multiple) 


ate] 


6 Emphasize an important component using background color, shadow, or border (or multiple) 


Tiny house hosted by Eco-Lodge Villa Epicurea 


4 guests - 1 bedroom - 3 beds 1 bath y 
(n) Entire home 
You'll have t^e tiny house to yourself 
<> Enhanced Clean 
This host committed Lo Airbrib's 5-slep enhancec cleaning process. Learn more 
$. Eco-Lodge Villa Epicurea is a Superhost 
Superhos.s are experienced, highly rated hosts whe are commilled Lo providing greal slays for 


guests. 


Free cancellation until 3:00 PM on Mar 5 
After that, cance! before 3:00 PM o^ Mar 10 and get a 50% refund, minus the first night and 
serv ce fee. Get details 


House rules 
This place isn't suitable for infants (C—2 yrs) and the host doesn't allow parties cr smoking. Get 
details 


€106 / night 


CHECK-IN CHECKOUT 
3/10/2021 3/11/2021 
GUESTS 

1 guest 


Reserve 


You won't be charged yet 


€106 x 1 night 


Service fee 


Total 


* Report this listing 


* 5.0 12) 


€106 


€106 


y” Cheapest 


X Remitly 


Proránea Dei ^21 


xoom 


INA monese 


BARCLAYS 


Recipient gets 


(Total siter feci 


1,160.39 EUR 


1,154.64 EUR 
v -5.75 EUR 


1,149.41 EUR 
v - 10.98 EUR 


1,138.92 EUR 
w - 21.47 EUR 


1133.18 EUR 
v - 27.21 EUR 


1,123.26 EUR 
v - 37.13 EUR 


1,108.94 EUR 
v - 51.45 EUR 


Transfer fee 


2.99 GBP 


1.99 GBP 


20.00 GBP 


0.00 GBP 


6.00 GBP 


0.00 GBP 


Exchange rate 
1 GAP + FUR! 


1.16469 


Mid-market rate 


1.15810 è 


1.15170 m 


1.16716 e 


1.13318 e 


1.12326 e 


110892 e 


Sta 


Creating Ul desien 
anding off screens at the right t 


$ Sign up for web app 


Easily sync frames v 


takes time and ettart, so fet the most out of your design by 


on vin Tex esign project 


ime to the right people. 


CA Download desktop app 


Jia our Fiema pugin and impart Auta-installs Sketch, XD, Phatoshop, and Il 
any Sketch, Adobe XD, Photoshop, or Illustrator plug | lar sc 
esign file ny drag & d hand 


¡_ _AA> A.  -<<K<=A< <<< <A 


| lemerm»comosnwy.co 
AS 


rop f 
Yes 
i | START NOW bl 


> 


handing oft screens at the right time to th 


6 Emphasize an important component using background color, shadow, or border (or multiple) 


$ Try emphasizing some component A over component B by de-emphasizing component B 


on your next design project 


eating UI design takes time and ettor, so get the most out af your design by 
s e right people 


© Sign up for web app GI Download desktop app 


Component A has been made more 
prominent simply by de-emphasizing B 


For you 


Hobby 


Free, forever 


Deploy from 
C) GitHub personal accounts 
Ay GitLab persona! accounts 


Y Bitbucket personal accounts 


> Command-Line Interface 


For your team Sh 


Pro 


$20/mo per member 


Enterprise 
Suited to your needs 


C) GitHub Organizations MP Gitlab Groups W Bitbucket Teams 


Deploy from 


Additional Features Additional Features 
- Up te 10 Team Members — SLA far 99.99% Uptime 
Advanced Invoice Settings Multi- Region Serverless Functions 
- Multiple Concurrent Builds + 


- Enterprise Suppart 


Preview Deployment Suffix * Nextjs Application Audit 


- Password Protection — „.and much more 


ach plan is s 


ct to our fair use policy and its respective platform limits. 
bby plans ara limited to personal, non-commercial use 


PRODUCTIVITY 


Develop a growth 
mindset in your team 


Featured insights 


REMOTF WORK 


How to keep your remote 
team engaged 


Read all articles 


6 Emphasize an important component using background color, shadow, or border (or multiple) 


e Try emphasizing some component A over component B by de-emphasizing component B 


COACHING 


How coaching helps your 
team during CoVID-19 


Emphasize an important component using background color, shadow, or border (or multiple) 


Try emphasizing some component A over component B by de-emphasizing component B 


What components to emphasize? Testimonials, eall-to-action sections, highlight sections, 


preview cards, forms, pricing tables, important rows/columns in tables, etc. 


Security and compliance 


Compliance built for platforms and 
marketplaces 


Paying out money is complicated by stringert 


regulations that vary by country Cornect shifts 
paymerts compliance ool gations from you t» Stripe, 

Under tre hood, Connect offers card data tokeniza:icn wetkaket 
tc help with PCI comp iance, p'ovides verification 


systems to manage K"C crecks, leverages Scripe’s 


lieenses around treo word, ard more 
&€anncet allows uz to ochieve complianoc with minimal 


effort, spand practically no time or payments-related 


OFA ACHOE oem mn 5 
expancing toa new country, Stripe will be ready for us. 8€ 
» MATCH list checks 

X data Lokerılaalionı fur PC! comitia johannet Koeppel CEC and Ce-Founder 
» Compliance with global regulations, including PSN? SC A 
» Money Transmitter Licenses (MTL) in th US 


ione y (EMI) License in the EU 


See silfestures > 


Narrative Bl 


You don't have to play 
all the parts. 


At Narrative BI, we put cur product, clients ard culture first. 


We partner with the best 


stripe Google E gusto D aico 


Would you like to see Narrative 
BI in action? 
Leave your email address tc discuss how 


your company can get first actionable 
insights today 


Employees come in all shapes and sizes. Find the 
right Fit. 


Gear rec 
er un oa, ran 


$62 


VISUAL HIERARCHY BETWEEN COMPONENTS 


6 Emphasize an important component using background color, shadow, or border (or multiple) 
7 Try emphasizing some component A over component B by de-emphasizing component B 


8. What components to emphasize? Testimonials, call-to-action sections, highlight sections, 
preview cards, forms, pricing tables, important rows/columns in tables, etc. 


THE SEA 
EXPLORER 


IHE FOREST 
HIKER 


Join the team 


TR ES MEDIUM 7-DAYTOUR EASY 5-DAY TOUR 
that unleashes their true 


uU 
) 
u 6 
Jo 


Get ademo 


of Workable 
Workob ¢ offers 2 hall su&c ci footures and 10015 


able s pig 


for ^ Sketch 


$48 


e Perscnal license 

© Sketch files 

© Auto-updatable Style Guide 
© 200 Components 

© 120 Wiretrame layouts 


© Free Updates 


Buy for Sketch 


for F Figma 


© Auto-updatable Style Guide 


© 200 Components 


© 120 Wireframe layouts 


f) Free Updates 


Buy forFigma 


Sketch & Figma files 
Auto-updatable Style Guide 
200 Components 

120 Wireframe layouts 


Free Undates 


Choose Your Licerse 


Emphasize an important component using background color, shadow, or border (or multiple) 
Try emphasizing some component A over component B by de-emphasizing component B 


What components to emphasize? Testimonials, call-to-action sections, highlight sections, 


preview cards, forms, pricing tables, important rows/columns in tables, etc. 


Re ationship 


Unlimited Cash Back" 


APY on Dapasite 


Froe ATMs 


Free Cash Acivance* 


Merchant Perks’ 


Get Paid Early’ 


Na Overdratt Fees 
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SEHMEDIMANN 


SECTION 


WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


WEB DESIGN RULES #9: USER 
EXPERIENCE (UX) 


HTML 


1 
Design is not just what it looks like 
and feels like, Design isllGwitworks 


— Steve Jobs 


User Interface (UI) is the visual 
presentation of a product. It's how 
the graphical interface looks and 
feels like 


< Layout 
< "Personality" 


«¿+ Typography, colors, icons, etc. 


yu Fu 
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User Experience (UX) is the 
overall experience the user has 
while interacting with the product 


S- Does the app feel logical and well thought out? 
& Does the navigation work intuitively? 


Z- Are users reaching their goals? 


Ul AND UX DESIGN 


UI is graphical interface < UI Design is 
what makes an interface beautiful 


Ul d» 

UX is experience with interface & UX 
L-I l Both are 

Design is what makes an interface meraca io 
useful and functional get ketchup 
& UX Design can not exist without UI Design! 

UX »> 

Ul UX 
Design Design Each creates 
a different 


experience 


UX DESIGN GUIDING PRINCIPLE: GOALS 


Z- A website or application exists for a reason: a user has a <- UX Example: 
goal for visiting it, and a business has a goal for creating it 


USER BUSINESS 
GOALS GOALS Highlighting an option in the 


product pricing table: 
Y ES] 


& Helps the user decide faster 
what is the best option Y 


- Helps the business maximize 


EXAMPLE: Designing EXAMPLE: Selling u revenue ii 
websites faster Good UX design aligns design kits for design l 
the user's goals with the tools 


business' goals 


UX RULES FOR USABILITY 


1 Don't design complicated layouts. Don't reinvent 
the wheel. Use patterns that users know 


QUEE V. ra el-biler il barn Index | | EU 
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-Elektrisk-ATV -Roboter WE Angresklema 
- Solcelle-produkter 

- Forbruker Elektronikk 
- Batterier à Ladere, stc 
- Fjernstyrte produkter 
-Disko-Lys -Rakett 


hos ARNGREN i Oslo. 
Se Lagerkccan ettar 
Preene (lev. 2 - 5 dager): 
@ Erpälager 


C Kommor fer $ uker 
© Lengre ern 3 uker 


Block distractions 


WH-1000XMA noise-cancelling 
headphones 


Bildctliser Nyhet | 


Conrad cic«x.ratik ^ è 
BESAS  |ELATV il 
Gar & voksne. 


3-Hjuls al-sykkal 


Elaktronikk # 1:4 


EL-Saaoter & BII SHOP NOW b 


Mercedes SL 
m Gummi-Hjul 
fra kr. 7538 - 


Habby & RC 


Horas 
HP-Máler (Bll! 
zuilmuskin 


4WD, 3-seters Willy 
el-Jeep, .med 


Gummihjul 


SONY 


Nyhet 1 

il-moped med 
_ * seht (16 Ar) 
ATV med 18995- el-bil (16 ár & moped- 
skill (18 àr) Lappen) Ire kr. 24,223 - y 


-yk. lopaleduar) nil pop 9898,- Ta alit: 18 230 Vac Adapteren 


nar du kka er Ustede, eller son Department Shop by Ca teg ory 


Electronics 
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Cosarmatbar 281 giki 


Accessones & Supplies 


: Camera & Photo 
wide Car & Vehicle Electronics 
RC Fly-Bat Cell Phones f Accessories 


TA cm lang Computers & Accessories 
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EL-Scooter 
5000 watt © 
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Styraanhat A 
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Electronics Warranties 
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Don't design complicated layouts. Don't reinvent 


the wheel. Use patterns that users know 


Make your call-to-action the most prominent 
element, and make the text descriptive 


2 


€106 / night 


CHECK-IN CHECKOUT 
3/10/2021 3/11/2021 


GUESTS 
1 guest 


€106 x 1 night 


Service fee 


Total 


"* Report this listing 


Reserve 


€106 


e 


€106 / night * 5.0 (12) 
CHECK-IN CHECKOUT 
3/10/2021 3/11/2021 
GUESTS 
1 guest v 


Reserve 


You won't be charged yet 


€106 x 1night €106 
Service fee €0 
Total €106 


"* Report this listing 


Don't design complicated layouts. Don't reinvent 


the wheel. Use patterns that users know 


Make your call-to-action the most prominent 
element, and make the text descriptive 


Use blue text and underlined text only for links! 


e 


Inaugural Address by 
President Joseph R. 
Biden, Jr. 


JANUARY 20, 202] * EN AND REMARKS 


The Inaugural Address of the 46th President of 
the United States, as delivered at the United 
States Capitol. 


Looks 100% like a 
link, but isn't one! 


Inaugufal Address by 
President Joseph R. 
Biden, Jr. 


JANUARY 2D, 2021 * SPEECHES AND REMARKS 


The Tnaugurbl Address of the 46th President of 


the CN States , as delivered at the United 
| States Capitol. 


Don't design complicated layouts. Don't reinvent 
the wheel. Use patterns that users know 


Make your call-to-action the most prominent 
element, and make the text descriptive 


Use blue text and underlined text only for links! 


Animations should have a purpose and be fast: 
between 200 and 500 ms 


Professional 
Communication For 
Your Team 


With Grammarly Business, every member of your 
team can compose credible, mistake-free writing that 
makes your business look good. 


Professional 
Communication For 
Your Team 


with Grammarly Business, every member of your 
team can compose credible, mistake-free writing that 
makes your business look good. 


Don't design complicated layouts. Don't reinvent 
the wheel. Use patterns that users know 


Make your call-to-action the most prominent 
element, and make the text descriptive 


Use blue text and underlined text only for links! 


Animations should have a purpose and be fast: 
between 200 and 500 ms 


In forms, align labels and fields in a single 
vertical line, to make the form easier to scan 


e 


Contact support 


Question 


Select your question... 


Tell us more—how can we help? 


Your email address © 


Don't design complicated layouts. Don't reinvent 
the wheel. Use patterns that users know 


Make your call-to-action the most prominent 
element, and make the text descriptive 


Use blue text and underlined text only for links! 


Animations should have a purpose and be fast: 
between 200 and 500 ms 


In forms, align labels and fields in a single 
vertical line, to make the form easier to scan 


Offer users good feedback for all actions: form 
errors, form success, etc. [web apps] 


e 


Contact support 


Question 


Select your question... v 


A Please choose a question to help us better assist you. 


Tell us more—how can we help? 


A Please tell us more about your question. 


Your email address B 


A Please enter a valid email address for us to contact you. 


UX RULES FOR USABILITY 


1 Don’t design complicated layouts. Don’t reinvent 
the wheel. Use patterns that users know w 


Today 


Walk dog 


2 Make your call-to-action the most prominent 
element, and make the text descriptive 


Call Steven 


Build UX lecture 


3. Use blue text and underlined text only for links! 


4°, Animations should have a purpose and be fast: 
between 200 and 500 ms 


5. Informs, align labels and fields in a single Today 
vertical line, to make the form easier to scan Walk dog 


Call Steven 


6 Offer users good feedback for all actions: form 
errors, form success, etc. [web apps] Build UX lecture 


7 Place action buttons where they will create an 
effect (law of locality) [web apps] 


S The Al assistant that 
grows your money. 


Automate banner 
production in minutes 


Greenlight makes it easy to leave 


feedback on any website. 


The All-In-One Toolkit for 
Working Remotely. 


2 


8 Use a descriptive, keyword-focused headline on your main page. Don't be vague or fancy! 


Join the solar 


energy revolution 


The way you work 
is evolving. Is your 
hiring software? 


Meaningful Insights 
Without the Click of a 
Button. 


Is design growing 
your product? 


Use a descriptive, keyword-focused headline on your main page. Don't be vague or fancy! 


Only include relevant information, efficiently! Cut out fluff and make the content 100% clear 
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3 Use a descriptive, keyword-focused headline on your main page. Don't be vague or fancy! 


99 Only include relevant information, efficiently! Cut out fluff and make the content 10076 clear 


a0 Use simple words! Avoid technical jargon and "smart-sounding" words 


© 


Everything you need 


to grow online; 


5 


Simple tools for your big ideas. Start yourfree 
website trial today, no credit card equiti 
i 


The only VPN you'll 
ever need 


ClearVPN helps you access any content, secure your 
online interactions and bring your internet life to a whole 
new level with just one tap. 


The modern 
way to build 
for the web 


Webflow empowers designers to build 
professional, custom websites in a 
completely visual canvas with no code. 


Use a descriptive, keyword-focused headline on your main page. Don't be vague or fancy! 


Only include relevant information, efficiently! Cut out fluff and make the content 100% clear 


Use simple words! Avoid technical jargon and “smart-sounding” words 


Break up long text with sub-headings, images, 
block quotes, bullet points, etc. 


90% of Startups Fall 
Herz are the most common reasons why startup: fail. 


Kenn CM UA rane A acondina tn shah tourer’ 
Pd Lhe to attract your attention on the top 2 rasors. 
| “No Market Need” and “Ran Out of Cash". 
Those are actually closely related! If 2 startup is building a product nobody 


warts they will not get sales anc thus will run out of cash. 


Soto pur it bluntly, most of startups fail because 
they build something nobody wants. Wow! 


But still, a lot of startups raise money from investors. Isn't ita sigr thet 
they're on the righ: track? Well, mo... 


There s»ems to be an cver-emphasis on money-raising in the startup 
industry. But raising money does nct guarantee success. | here are tons 
of unprofitable startups that raised millions of dollars. 


Conclusion 

If you have to rerverr bor one thing out of this artice. i: is: TALK TO USERS! 
« Talk to users before building 
a Talk to users while you're building 
* Talk to users after you've buik 
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WEB DESIGN RULES AND 
FRAMEWORK 


LECTURE 


THE WEBSITE-PERSONALITIES- 
FRAMEWORK 


HTML 


THE WEBSITE-PERSONALITIES-FRAMEWORK 


Distilled into countless 
web design rules that 
we just learned 


100s of well-designed RULES SHOULD BE APPLIED ACCORDING 
sites deconstructed TO SELECTED WEBSITE PERSONALITY 


“Ne Distilled into 


7 website personalities 


THE WEBSITE-PERSONALITIES-FRAMEWORK 


THE 7 PERSONALITIES How do you want website to 


appear to users? What “vibe” do 
you want to transmit? 


Y 


Choose one of the website 
3 Plain/Neutral personalities accordingly 


1 Serious/Elegant 


2 Minimalist/Simple 


4. Bold/Confident y 


Apply personality traits to each 
design ingredient 


6 Startup/Upbeat A "4 y y y V 


7. Playful/Fun 


5 Calm/Peaceful 


Typography Colors Images Icons Shadows  Border-radius Layout 


RIXO A PELLE Home Culuctión Lousbock Abu.t 


DETAILED CAAFTSNANGH 


[] OVERVIEW Design for luxury and elegance, based on thin serif typefaces, LUXURIOUS avd 
golden or pastel colors, and big high-quality images CONTEMPORARY APPEAL, 
— for ENERY WOMAN 


f INDUSTRIES Real estate, high fashion, jewelry, luxury products or services 


7 Web design ingredients we learned about 


ja TYPOGRAPHY Serif typefaces (especially in headings), light font weight, 
small body font size 


& COLORS Gold, pastel colors, black, dark blue or grey 


ud IMAGES Big, high-quality images are used to feature elegant and 
expensive products 


LATEST COLLECTION 


ICONS vw Usually no icons, but thin icons and lines may be used — 
Winter 

£ SHADOWS © Usually no shadows 2020 

B BORDER-RADIUS (O Usually no border-radius 23232 


& LAYOUT A creative and experimental layout is quite common 
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DISCOVER PLAN YOUR VISIT WHAT'S ON 


Human grade, certified 


organic, plant-based Y 
a ! ) 13 à; | | 
for your canine. 


THE ?ALACE IHE ESTATE OF TRIANON IHE GARDENS IHE PARK 


From the seat of power 10 8 eur yon of inimacy The art of 
f Fear 


Dig through our human 
grade wellness and 
activity-based treat 


products to keep your 


voksnalost slovenského dizajnu Modernizácia typických tvarov pup happy and healthy. 


In Ari Tails - Canine Treats On Vaan - Canine Treats 


Tradičná ľudová architektúra so sedlovou 
strechou v modernom prevedení 


THE ROYAL TENNIS COURT GAMES AND SPORT AT ACQUISITIONS 
VERSAILLES 


Tradiċnċ a zároveň moderne Cisty a prírodný interiér Industriäl i retro v jednom 


From one dog lover to 
39 f Os 2 TAAJ 4 > a ` OV f j ^ 
22,000 ARTWORKS TO DISCOVER ONLINI sioe 


Moderne slovenské - 
domy s odkazom = 8 T. a ETA 


, T l 
arras. 
ri - 


minulosti 


am i ^w 
SOFAS MAD so p 


EN MAT MA 


Organic, Plant-Based 


A 
kid 


OVERVIEW 


INDUSTRIES 


TVPOGRAPHV 


COLORS 


IMAGES 


ICONS 


SHADOWS 


BORDER-RADIUS 


LAYOUT 


sized sans-serif black text, lines, and few images and icons 


Fashion, portfolios, minimalism companies, software startups 


Boxy/squared sans-serif typefaces, small body font sizes 


Usually black or dark grey, on pure white background. Usually 
just one color throughout the design 


Few images, which can be used to add some color to the 
design. Usually no illustrations, but if, than just black 


vw Usually no icons, but small simple black icons may be used 


© Usually no shadows 


© Usually no border-radius 


Simple layout, a narrow one-column layout is quite common 


ELM ids IS En Beti A 
Focusses on the essential text content, using small or medium- of living ° 


Sound Contact 


E c 


Change the way you live life, closer to nature. 


"iuniueJd *ejqeuiejsns *je|npo|w 


Nr. 03 


Nr. 02 


Nr. 01 


Live in ark Work in an ark Relax in an ark 

Nr. 01 Dur philosophy for arks Back to nature 

What's Ark- Ark-Shelters are prefabricated, fully 
Shelter? 


finished, modular units. By a lake, deep in 
a forest, at the edge of a field, a steep 
mountain hill or your city rooftop! Make 
your dream come true, installed in one 
day, no extra on-site work. 


We have ideal conditions and sre 


The shelters are built in one piece, 


which gives the incredible mobility able to reach the highest details 


to reach your dream location. and reduce production time. Which 
Modularity ensures that over time allows us to keep control of the 

ou can grow your Ark to your price, remove any onsite 

eeds. Th t 'gated b t t ts and mak 


craftsmen in our factorv vour dream home, on time, on 
budget, at the highest quality 


possible. 


CHOOSE YOUR PURPOSE 


Ark-Shelter to live in closer to nature 


Clippings “atform~ for~ Projects Dook a demo co Log in 


The new way for 
interior professionals 
to buy furniture 


Find furniture for every 
type of project 


= 650* brands + Trade pricing 


t^e works 
laang brargh 


iy B Source from anywhere 77 Free samples 


Cin Tool 


We work with... 
Interior designers 


Hospitality 
The Silo Restaurant, London by Nina«Co 


Book a como: 


nm? Oe 


exyte 


Pretty code by handsome people 


Mobile, AR, VR, Al, Blockchain — we have it 


Here's why our clients trust us 


Rated 5.0 on Clutch + 


94% employee retention — 


rate 


50+ successful projects + 


9000+ stars on GitHub + 


1.5 years of cooperation + 
on average 


100% affice-basedteam + 


Hire a team of programming experts and design 


professionals to design, develop, and deploy your 


| jo Laser Beam Dedicated Team 


Designer with badass skills 
based in Prague. 


— LEATN MORE | 


Enter email E 


Somewhere between staring at the screen and 
tilting my head the magic is done. 


More than 
a designer 


Keep it stupid Award-winner Keen to learn 


Work hard Play hard 


Think Digital Summit Portugal 


Novamher 4 4 > = 
Mel IN 


|| OVERVIEW Design that gets out of the way by using very neutral and 
small typefaces, and a boxy, structured, and condensed layout 


Inside IBM 


& INDUSTRIES Well-established corporations, companies that don't want to 
make an impact through design 


Z TYPOGRAPHY Neutral-looking sans-serif typefaces are used, and text 
is usually small and doesn't have visual impact 


& COLORS Safe colors are employed, nothing too bright or to washed-out. 

Blues and blacks are common ro 
ua IMAGES Images are frequently used, but usually in a small format 4 ^ > 
ICONS ww Usually no icons, but simple icons may be used — ment. > 


¥ SHADOWS © Usually no shadows 


Explore product trials and offers 


reve 


B BORDER-RADIUS Q Usually no border-radius 


& LAYOUT Structured and condensed layout, with lots of boxes and rows 


gu Microsoft Mirenof 385 Offce Widows Luce box Dess Support 


es mm 
O mm 
Suy Xbox games Stop Surtace Choose your 
und rr es ewes Mini sw 65 


Lal 


A. 


Bundle and save up to $460 Save up to $800 on select 

Werk and pliv vetuilly anrwhere when Surface Laptop 3 

you bunde a Surface Pro 7 with choice cf Sare $400 now when you buy a new 

select Type Cover Surface Laptop 3 and get up to $400 back 
when you trade n an ebgible devte 


(4) GAME PASS 


Xbox Game Pass Ultimate 


Khas | ne Gold am! come DO high-« 


Play 'ogethher with 


ELM e 


For business 


Introducing Microsoft Viva 


Dexover the sew enpleyee expenence 


Tax season savings 

Save up to $300 on Surface Book 3 fer 

Buses platform designed to help pecple 
Coenect, locus, lara, and thrive a: werk 


Chat, meet, call, and colabora e 


AJ Marosott PR 


Surface deals 


Select Surface deves are on tale now-<1e while suxples last 
For help chosing the sght Surface, bock apesoral shopping 
agpontment wih a Microsoft Stere associate 


A > 


op Windows pend your next FC 3ho» tuses 


Never miss a beat Do more with Windows 
Discover the latest asado fem Surface. Shep tablets. lagtopi. al-ir-ones. gara 
fenurng ulire-comiortable design PCs, and rsore 

immersive sound, and all-day battery 


Microsof: Teams 


Microsoft Ignite 

Alters’ digitaly © connect with experts, 
explore the utes. emerging tech, and 
distusi developng topes witha 
worldwide comesunity 


Microsoft's response to COVID-19 


Read how we're responding to he [OVID 19 outbreak, and get resources to help, 
Learn more > 


Porscede My Porsche 


Login 5 Hegistiierung i 
DESIGN BUILDERS | 


Jat L uns = 


= A 


Ahcme bust kome setin:pied Why Design Bulders Show ome: Let'sGet Started News&ivents ContactUs 
PON 


Medele Fabhuzengsacte — Orinecarten «= Motorsport Events Sivice $ Zubehör Unternehmen 


Splashing 
Out 


Sew whet puw rmorey yes you 


Soul, electrified. 


Der neue Taycan Cross Turismo. 


^1 7 
al MT rw 


Modelle 


A home built around you 


718 911 


Ab EUR 56.372.00 irki. MwSt. Ab BUR 106.362 00 inkl. MwSt. 


* 1: 


Ab ¿UR 83 620,00 inki MwSt. 


KREIS ra = 
`~ —- 


Panamera Macan 
Ah FUR 9370700 irid. MwSt | ARRIR A1 739,00 nd Must 


Cayenne 
Ah FUR 77.792,00 ini. MwSt- 


| 
-i IT s 
E 


ee — n 
Every Design Builders wae 


home is unique Be inspired a 
See all sh pe^ 


t 


— RE " 
2 Korfigarierer y —— — [5 Koefgareren > Nh Modele 


Finden Sie einen Porsche in Ihrer Nähe 


E > 


E - 


? 911 Modelle kaufen ? Tryom Nodetie kaufen 


+ 710 Modelle kaufen 


Beratung & Services 


News & Events 


-= 
a [= ro 
Porsche Financial 
Händlersuche Services Kontekt 


Modelle vergleichen 


Save 25% on Prop Kits $ Click Hore 


PERSONALITY 04 - BOLD/CONFIDENT 


PREPARE 
À | | ee FOR WHAT W ~ 
L] OVERVIEW Design that makes an impact, by featuring big and bold YOU CAN'T weg > 
typography, paired with confident use of big colored blocks Lit = cm 


PREDICT. l 


fa INDUSTRIES Digital agencies, software startups, travel, “strong" companies 


Shop our kits 


ja TYPOGRAPHY Boxy/squared sans-serif typefaces, big and bold typography, 


especially headings. Uppercase headings are common a a al perque aad EE 
be more prepared than ever. education they offer. safe during a disaster. 
" : A $ : People Ehe New York Times GMA 
& COLORS Usually multiple bright colors. Big color blocks/sections are 
used to draw attention 
SHOP OUR KZTS 
ra e e e 
aa IMAGES Lots of big images are usually displayed m 
ICONS © Usually no icons 


Ae 


iv SHADOWS © Usually no shadows 


THE SAFE THE MOVER MAX 
@ BORDER-RADIUS © Usually no border-radius 


mts liments 
Ata "eei n earn more ern mer ne nmore 


& LAYOUT i All kinds of layouts, no particular tendencies 


Dover 


Home 


Build your recruiting 
engine with Dover. 


No more juggling recruiting tools—Dover finds and schedules candidates you actually 
want to talk to, at a fraction of the cost. 


Join the 100+ companies relying 
on Dover to find the best talent 


We discover Gu 
candidates you = 


actually want to £ 


talk to. 
Dover uses a robust calibration process to deeply Cc» 


understand your requirements. 

Then, our system evaluates prospective candidates 

on 50* data points so we can find qualified 

candidates who are the best possible fits. * 


hen 


Dover helped us hire two phenomenal engineers 
for our first DevOps and Test roles. The product 
held up our high quality bar — and working with 


thair taam was fantastic! 


e, your 


passion. 


Audacious 
soals, 


From marketirg strategy and Isadership 
through execution and results, Matter 
Wade procuces reliable growth for 


scole-ups and large enterprises 


Enterprise 


Creative Services > 


Create 
a website. 


Star! wit? award-winning templates, then 
customize to fit your sty e anc professional needs 


Nolan & Co 


Nolan & Co is a digital pr« 
agency that focuses on st 
and design. 


All TENP ALTES A 


Sell online. 


u 9. 


7 OVERVIEW 


& INDUSTRIES 


Z TYPOGRAPHY 


& COLORS 


mi IMAGES 


ICONS 
“Y SHADOWS 
@ BORDER-RADIUS 


$ LAYOUT 


For products and services that care about the consumer, which 
is transmitted by calming pastel colors and soft serif headings 


Healthcare, all products with focus on consumer well-being 


Soft serif typefaces frequently used for headings, but sans- 
serif headings might be used too (e.g for software products) 


Pastel/washed-out colors: light oranges, yellows, browns, 
greens, blues 


Images and illustrations are usual, matching calm color palette 


Icons are quite frequent 


W Usually no shadows, but might be used sparingly 


Some border-radius is usual 


w All kinds of layouts, no particular tendencies 


BYRDIE 


FASHIONISTA 


kk * (ho 


Feel balanced. 


Healthy doesn't have to be hard. 
We make it easy. 


ed En 


lake the quiz Get murr. eats that work Suck with it long tern 


Tol us a lathe about youriel. We're ocot Cet your perscoolited secommendaien 


ksvonors Backed by science aad delivered 10 fou 


A routine tailored to you 


Well help ycu create a health plan wih vitamina, cupploree tc, and more trat help you ‘eel your best 


soday ard Lunport you long-terrr. 


Anne's plan 


Full-time mom 


Anre's daughter keeos her basy. kut she tre: te work 


Out Ged eat Mar hy mest days 
e FROR'CTICS fur digen" 
(M) PROTEIN ter portomrorteot reor y” 


Ó ELECTROLYTES te suppor ydraios" 


keep the :o weriatien guna We 1 


adjust as your hoabh needs change 


“np > Werk ®© SEATFKATNON 


no. 


Space for you 
to breathe. 


A global community of ezper Ieschers arc codicales 
pasetitkonass who are al abaut sprescing goorteocs 


Since its inception, MNCF. has seen ot the “oceltrent of the 
modem rrird'uiness movement. providino nad tation 
opirescel ond rolevart mindfulness content for tre modern 
human. 


mnt. 9 WORK GERIT IAIN 


VOGLI Th: Jew ijork Eine: 


oce 


DENEFITS OF MEDITATION 


We enable you to fcel good. 


Reduce stress 


Nerraro AFE wits prom miact ane learn 
taw Vo effecjiively coger miih Uw Luuyt 
stuff - lie anxious thouchis ard difficult 
emoticons. li presen! merreet warmes 


Bye, Obsessivoness 


Increase productivity 


LETS face il, Mere ti SO TUCH Work tO te 

deno in tho ward andit cin te 

Overwowrmirg. Creare Manta anc 

BĦORKHAN MACA ch» yi Cyr thew inm 

(marg felly hor boil: your ipe and 
esterral worlc 


Heduce depression 


Studies show thet mecitation, zspecialy 
wren pared with exercise, can lead boa 
10% decrease in depression. Turns est 
tar coe tend body connection Is real - 
as k &cioneo 


BuzzFeeo 


Say goodbye 
to idle money. 


Earn 4*6 eld with CuFI-20wered saving. 


We make money move. 


Learn more © 


$49 


Fast & Easy High Yield Secure 


Consect your bank account and 4% APY throegh the power o! Quer SX million sarninz Interest 
stori saving in ender 5 minutes. decertraizod traxe. 19/ev tranks to best-in-class 
ending partners. 


How it works. 


Aulomats your saving in ander © minutes, then bray about it to your friends. 


Learn more © 


a E O 


howe $129.596182374 ae 


Generate fund or variae internat in 
real ino a: ctos up to 20x your bank 


Lat your bark sccoumt sonda finds 
weterth:. 


Aue Carl) Qu. 
Orbit paró ^ mm w o mri id > TEL Uwe pur rein maria Inmsenby 
fecur wg Gepost: ( x ILS 2 Tw E mro Mes Of 11009 toma. 


» Connect Overview Marketplaces Platforms Payouts Features Pricing 


co 
Payments for po 4 
platforms and — 
$1,043 
marketplaces 
L] OVERVIEW Widely used in startups, featuring medium-sized sans-serif vantat = 


typefaces, light-grey backgrounds, and rounded elements 


& INDUSTRIES Software startups, and other modern-looking companies 


¿2 TYPOGRAPHY Medium-sized headings (not too large), usually one sans-serif 
typeface in whole design. Tendency for lighter text colors 


& COLORS Blues, greens and purples are widely used. Lots of light — > -— — 

backgrounds (mainly gray), gradients are also common 

MancMano (3 shopify WiX Man 

uż IMAGES Images or illustrations are always used. 3D illustrations are 

modern. Sometimes patterns and shapes add visual details M 
LE a The easiest way to facilitate payments 
ICONS Icons are very frequent and pay out recipients 

e n T = 


Onboard users Accept payments | Pay out users Manage platform 


iv SHADOWS Subtle shadows are frequent. Glows are becoming modern 


B BORDER-RADIUS (A Border-radius is very common 


Onboard and verify your users 


Whether you use Connect's prebuilt, optimized 


Uls or build your own custom flows, it's easy to get 


& LAYOUT Rows of cards and Z-patterns are usual, as well as animations —— peet A 


(A gurerady budnecs Bineg 


? 


Is u... Professional 
your product: a Communication For 
Your Team 


With Cri E 
x? šat LA jse 
~ MET 
a at n n 
Getintouch + QNS " Sr makes your Dusiness lock 9 
x ga e 
15 f d ^ > 
. ġ w 


The issue tracking 
tool you'll enjoy using 


TÉ * à 
A "5 
, Y A 
— $ 
Sigr up for froe > 
Great interfaces set your Your Writing Reflects Your Business 
business up for growth Every email web page, and social media pest Takes an impr r 1 tor 
wäh Qr armmarlv, you can be oo dent ifs he (Cos impressio 


/ 


G 
Go Beyond Spelling and Grammar 
We design great user » Hig^-quality writing & more thar just mechanics. Srammarly Business gees decoer with 
ii e it a sits mi I Compound = Retool B graphems (i render i: askSpoke 


interfaces that empower 
people and drive value l 
EB MERCURY dnibbblo ba Albert ES draftbit 


CUON Correctness Clarity Engagement Apprepricto tone 


An experience you'd expect froma 
professional tool. 


Align Your Team With Your Company’s Style 


Ajith Grammar Y BUSINESS, you can cresta a company elyle quida to keer 


every team meribers communicat un dee and un-brand 
Guik for speed keyboard first design fer software teams 
ptv 53983 applications nur 


Seman fte Gude 


E 


D 


» E 4 


* € 


PERSONALITY 07 - PLAYFUL/FUN 


OVERVIEW 


INDUSTRIES 


TYPOGRAPHY 


COLORS 


IMAGES 


ICONS 


SHADOWS 


BORDER-RADIUS 


LAYOUT 


Colorful and round designs, fueled by creative elements like 
hand-drawn icons or illustrations, animations, and fun language 


Child products, animal products, food 


Round and creative (e.g. handwritten) sans-serif typefaces are 
frequent. Centered text is more common 


Multiple colors are frequently used to design a colorful 
layout, all over backgrounds and text 


Images, hand-drawn (or 3D) illustrations, and geometric 
shapes and patterns are all very frequently used 


Icons are very frequent, many times in a hand-drawn style 


Subtle shadows are quite common, but not always used 


Border-radius is very common 


w All kinds of layouts, no particular tendencies 


Kurumsal Yuz Yüze Eğitim Online Egitim Okulumuz jietisim 


YEAR OF THE Drama Kulübü Yıl 
DRAGON Sonu Gösterisi 


l PLATFORMA GIT > ) 
\ 
sy 


Minidil Online Özel Derslerle 


Tüm Türkiye'de 


materyalleri 


latiner 


Minidil 
Etkinliklerinden 


TUMUNU GOR — 


A A PUP ABOVE 


Pinte ge - 
rinte ? . 
T-Shirts pl 


Order blank or custom 
xeġi reac Makes It esy 100081 Sape" HO'L yA custom l branded fece masks Honk is the ln weyte chat with your fiends 


aria t-sbiris that ye: your mensage ini Cw world. today ir reat ume, with messages snows Iv? as yos type. 


YOUR DOG'S 
— BEST LIFE IN - 


@ App Store 


Browse rrocuc*s + Contact a printing pro 


Stop Waiting Around | EVERY BITE. i y 


for Messages i 
SHOP All 
mt 


e) 6 hev 


Lew mininsurms Lightning fast del vary Money back guarantee 


aM, n. aa a l . ONLY THE BEST 
Live Typing No Send Button No Chat History IN OUR BOWLS 


Odbore sending- Hebo trping Hever hil sard again Just lyse à message and Ondy two live messages, instead of thousands 


Mecca pes apperrimo aa wens tyr Clear it in Sy wet nem that hail an ever timo 


Don't settle for y" w Y sw Pr RER MGPASTE ICD REA 


custom shirts LOW CARB 


no one will Y awed 1) oo 3 4C CARBS IB EVERY 100 KCAL 
— tab PY YUMMY NATURAL GRAVY 
o Me RICH IN COLLAGEN AND HEALTHY ANINO ACDS 


HIGH PROTEIN 


Your brand i tac valuable to print 
on scratchy, M fitting ih et hat ro 


ene wil wes: 


Real Thread's | brary of sort shirts React in Real-Time Keep Your Friends Close 
unique print options, and simple with Huge Emojis Eno ud r feine so salina and frec to chat 


order process malas it eosier tsan 


ewer ue aci yos hee and 


Talk to a human 


wear prosdly. 


Tu team of apparel experts 
au awars ar ertai, phone 


coll or even » chok sway 


Cerca, try us Y 


A 


Tu o E = REGI | ^ | 
- Y Aa FE | do a | | a 


Be Present Just Honk 


`~ ` : - 
> Jeg hum we du i -— 
Ed kl 


Alwars kwa when somsene's in a cha To oet someone's atienton last jest Honk then 
wd the mo it they era Once, twice or 33 mar tees às yox want. 
Ou r l rod ucts nnn 


Join Honk plating 


business partners 


= Tame Tag is TL PARENTS FOR 
ae — dis Y aiti DOG PARENTS. 
Long Siseves Fodina 4 Ach bagging 
Hoodies Fod Printing & 
rece Vass: 17) Mana lags 


Qe. Jarit $ la ta. 


Cie PapOllicor 
f Cofounder 


ADVANCED: COMBINING PLAYFULNESS AND BOLDNESS 


More: VEM 
Boxy/squared sans-serif 4 
typefaces 
Big and bold typography Bold/Confident 
Bright/flashy colors 
INJECT SOME PERSONALITY TRAITS 


4 Serious/ _ Minimalist _ Plain/ _ Startup/ , Tut 
SERIOUS Elegant [Simple Neutral Upbeat > PLAYFUL 


More: 


More: Colorful 


Calm/Peaceful Rounded corners, 


Headings using soft serif typography and icons 


typefaces 


Pastel/washed-out colors | Shadows 


i Illustration 
Illustrations ustrations 


CALM 


AVercel Ea 


Develop. 
Preview. 


hitehd How t aada About Pricing Login Start your registry 


Guests fund your 
honeymoon. 
Beautiful. Fast. Simple. 


The simple, modem, and mesringħul way to fund your 


ariventura of alfetiene Your guests ae going talne it 7 
Sier . your reyisiry View sar ghe meyist y & Ma 3 
Mrorb ir Tp Jegn 
Welcorc to buf honey 


Free TAL Wo crecit caedi reaured 


Entrepreneur għa. (S)EFiNERY29. imsipez abe ÑVEINESS  ggcBS Fox 


© Big and bold typography 


© Big color blocks 


Here's how it works 


01 O D 


Personalize and create gits Launch end ve with quests Recciyf contributions tc your bank 
Add photos and a welcome message. Create Once vou'rc shoc, launch your registry and Rofi heartfelt cortri2ufens strcight to your Develop 
your Fitch URL withicues;s bank éxoouni. ho strings 


any kind of git you cen magne sh 


Explore how it works 


we Nets, ihe 


y ] ICEDOCA l 
] / | KEATON ano Iw, € Cast e sea d 
zomiFerce, vavel, news maring 


Fast Refresh 


Fast. onan Flexible Data Fetching 
Receive quest nee 
contributions 


N ponte —_ : S- Very boxy typeface 


Edge on Localhost 


ZZ — cll Z- Big and bold typography 


WORKS WITH 30+ JAMSTACh FRAMEWORKS 


05$ »voocooc 


S : i 
imple Pre 


Enj tri d i 
dde eta a Accelerate with vour team 


l p 


A . 
¿drip Fenes Y paang el *— ene — Quibes Lean v Jom t5 an exgert iry Unp ese p af Bari 
L a AIN 


Revewe Fertormence by Strotecy 


Make more money LN m m 
with smarter 
marketing. 


Finances, simplified. 


Urlike barks that let your cash sit idle in your accounts. we usa 
tecteotocy to help you grow all your moray efroctiess y. 


ld your evano b "vasto qa in bo 
* ma o v 
cyalty and rs*ention with Drip. We give wou the tools ycu neod 5 
to bulg personal and profita zie rmiotionstips wit? your ——— CETE Ba EE — "— 
custom 


j ot 3200, mi. 


Dert driving sales with Cop tecay 


Rd -nerdwoliet 
BEST RISC ADVISOR 2019 l z 
BEST CASH MANAGEMENT 2020 BEST IB 


ACYYyOR,. 1920 


Irregular round design 
We've helped ecommerce marketers generate 


over $1 billion in attributed revenuc elem = nts z 
$1,002,632,467 car 


Hand-drawn icons and 
patterns 


Upgradg your 
anking. 


No sccourt feos, 035% A D'Y And unlimitad, froe trarators 


Direct deposit and get paid Jp to two days earty, send c»ecks 


pey DONS, and get zesh Irog over 19009 ATMs to free 


LEARH MORE 


Grow and improve Send emails Turn shoppers 

your list. with ease. into loyclists. m 
& 1g ip * €% xj x3 wit "E "MIS ere Om st purchase ond ur thor 

3x more sales with a welcome 8x h cher revenue with tarceted Repect buyers Jrive ix more 

emcil va untargeted email senec revenue ord o"e Qv more likey 

promoteral emails toconvert egain 


& Headings using soft Invest ye avings. 
serif typefaces M 


Crow va P-jorm wealth wth an automated partfsko of 


Trusted by 27,000 + morketers worldwide 


FT: - pa ra OLE l rT WPS 

CRA e A " lensabl "s fied index furds, No maus irediza, 30 enne B 4 ħ 
aga 267. US Rocks 
personalised Lo you, And Ue da Lo Te 


bees cutiome Mor e 


< lllustrations in 


calming pastel colors Ä 


Make more money from 
email marketing. 


19 bere Rewer 


Upt rnize your Money across SANA n3, saviegs 


and iawsctmient« — sħa-tlenedv 


Wa SECFI 


Finance Pise Lesen 


Make the most of 
your options] 


Ve are a wam cf equity expers 100% ‘ocusrd on 
Iorlaeng Markup enployas ur cu sid, mare end 
unlock the value cf ther stock options and sienes 


UNDERSTAND MAXIMIZZ UNLOCK 


| own my shares - can | 
get liquidity now 
without se 


Should I exercise now 
or later? How car | 
afford Ir? 


What are my options 
worth and the cost to 
exerc «o? 


typefaces 


lacis such as a peoft sarulater 
and tac calculator show tha 
value at yer week pian anc 
exercise cost 


Nor-«aecourse fnance ng covers 
the cost of year emange - with 
nie nee te pay it hack enti yen 


nanang helps you acvance 
your shares far cther financial 
portes - wer nc rand ta cell 
On the secondary ma 


company exits. 


pastel colors 


Calculer See tow 2 


Program Marigo 


Pay for... a 
your options $ 150,000 


th swerrika apinn and pae het taa 


What our clients 
ay about us 


The secco that Soch prrsoos s nvalusble to navy 
2€opie in my SALI ON. 1 hid à great »ne working wt 


Z- Headings using soft serif 


< |lustrations in calming 


LJ 
% Mine Wraiweco Wroweare  Forcomearies Priakwinacion FAU — Eleg 


(sumit y 


We come to 


The Future of 
Data Ownership 


manage your dig tal l'an print 
be, anc wellmaxe h hape. 


Evening Standart, COMPANY 


Crow the line botween sense os eso 
Â these you dont which put vorat sk 


Z- Headings using soft 
serif typefaces 


re the sole | 


f 
owner of vour dala 


Illustrations 


Wie discewer the compen halding your data by aratyzing your ii n ) 
«malle subject bros. Wo derit read or collect the cortar of your 
«mall 
Eme e o 
Discover veur dig talfoctorint 
We map afl the Compare: you've zer Where's yoar dal 
riericiod with theosghyour email _ $ — 
= i — — tee 
Cac ji Candidi w DET 
, — 
"Wheve’s joer data O © 2 o 
— veias m Nese han het 


SECTION 06 — 
COMPONENTS AND 
LAYOUT PATTERNS 


IN 


JONAS.IO 


SEHMEDIMANN 


SECTION 


COMPONENTS AND LAYOUT 
PATTERNS 


LECTURE 


WEB DESIGN RULES +10 - PART 1: 
ELEMENTS AND COMPONENTS 


HTML CSS 


FROM ELEMENTS TO WEBPAGE 


PATTERNS 
Elements —J Components =» Layouts — Webpage 


With you every step of the way. 


With you every stap of the way. 
With you avery slep of the way 


Based on scientifically provea research, our 


guided exercises and signature Check-In tool will 


help you build a journaling habit you ll actually 


stick with. 


Mare than just a notebook 


LEARN MORE 


Designed and buit for you. 


PATTERNS 


e Use common elements and components to convey your website's information 


e Combine components into layouts using common layout patterns 


e Assemble different layout areas into a complete, final page 


Q ROM 


Text 
Buttons 


Images 


Input elements 


Tags 


This lecture 


O 0 4090 hO09NM-2 


Breadcrumbs 

Pagination 

Alert and status bars 
Statistics 

Gallery 

Feature box 

Preview and profile cards 
Accordion 

Tabs 


10. 
11. 
12. 
19: 
14. 
IS: 
16. 
1 
18. 


Carousel 1. Navigation 

Customer testimonials 2. Hero section 
Customer logos 3. Footer 

Featured-in logos 4. Call-to-action section 
Steps 9. Feature row 

Forms 

Tables 


Modal windows 


Row of boxes or cards 
Grid of boxes or cards 
Z-pattern 

F-Pattern 
Single-column 
Sidebar 


Multi-column/magazine 


1. 
2. 
8: 
4. 
3 
6. 
7 
8. 


Asymmetry/Experimental 


A ELEMENTS 


Job Description Rewriter 


Rewrite your job description with our free Al-powered tool! F 1b C ry adapts and E YOWS 
Paste in a short job description and we'll generate a longer variant to help you get your with you r company. 


creative juices flowing. If you don't like the output, hit Generate again to get a different idea! 
Experiment, take notes, and have fun! 


A work management platform trat replaces meny tocls inside your 


company and embracas changes. 


Shorten development, deployment, and migration Everyone on the same 
cycles page. For real. 


Prevent rollbacks and service disruptions by identifying weak points in your system before 


Sanity is tye first content platform to ampower teams of 
launch. all sizes with real-time collaboraton, advarced version 
control and more 


Wo offer the perfect variety of experiences to satisfy 
Most Popular Tour 


anyone's desire for adventure. Whether vou want Lo relax 
Cate ories inthe unparalleled beauty of Iceland's nature or take a 
5 more challenging adventure, we've got you covered. Tha 
possibilities are encless and the memories will las: a 
lifetime. 


"d di A i. uo dia 


A ELEMENTS 


TOOLS FOR MARKETING TEAMS 


Tools and insights to help you work 
smarter, together 


Marketing consultants and freelancers use Trendrno to free up time, demonstrate impact, 


and tie their efforts to real business results. 


TRANSFORM YOUR ECOMMERCE BRAND 


72 hour product photography 


Launch with one click, 


or use our SDK. 


Voiceflow's one click publishing or SDK enables customization 


for any workflow. 


GET A QUOTE 


Get started with 
Cover today. 


After getting a quote, you'll have instant access to an 
insurance expert for advice. Reach out to them by text 


message at any time. 


How we do it 


Data backed, scientific proof of 
food claims 


Food In-Depth nas developed comprehensive and rigorous testing 
solutions that are fast. affordable and consumer usable. 


EARN MORE ON YOUR PAYCHECK. 


GET PAID UP 
TO TWO 


DAYS 
EARLIER. 


Why should you wait to get paid? 

Set up direct deposit with the Cash Account and get your paycheck 
up to two days early. The earlier you get your paycheck, the more 
time you have to earn interest. 


Build. 


Have a unique work process? 


Create 
a custom app 
in minutes. 


Fibery provides freedom for curious lego-lovers. 


A ELEMENTS 


TRY NOW FOR $3.50 


ADDTOCART — 


| SHOPMATTRESSES — 


li 
" EY > 
DAR 
Fur - 


ES Try for Free See pricing 
(REQUEST A DEMO | Start Free Trial Talk to us 


TRY IT FREE 
i y 


VIEW PRODUCT DETAILS 


Get a Free consultation > 


Ship here 


Edit Delete 


FLOORPLANS 


Move to cart Move to favorites Remove 


Add to Chrome LOGIN 


O3 IMAGES A ELEMENTS 


New year, New possibilities 


Invest in Yourself 
With a Wildist 


Photography Workshop ; 


Model X 


€ ne dor Toushvess Deber y 


Bayview Meeting Room 
Meeting tc discs: recent project... 


er ld a 1 d la, "Ag 2 
i wf : T : - l 
Ta re 2 - L ha 
- ti E = - ú P. 
$ u a 
E E = L-BAR Be =} , f | 4 u mi l = 
: , a» 1m ġ l = L) , 
u D. e l Be 
IL | -a ^ l =- . d - bs T 


i 


Italy Japan California France = 


eo 
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amazon ois 


a Search for anything 


1A Udemy Categories 


Your work email Learn more 


Cc Q Search for UI designs... Screens Inbox flows User flows 


O Search or jump to... 


DELIVER EVERY 


30 DAYS ^ 


15 DAYS 
CASE QUANTITY - 1 + Venue 


45 DAYS . 50 + Active Members 


60 DAYS 


ie to the pandemic, our delivery times may be longer than 
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© Attach Stack at setState Calls in DEV Mode Component: Core Utilities | Type: Enhancement - 


#7387 opened on Jul 31, 2016 by sebmarkbage 


© IE 11 and Edge no longer prompt to remember password on controlled form Component: DOM 


#7328 opened on Jul 21, 2016 by IPadier 


© Optimizing Compiler: Compiling to Internals Component: Optimizing Compiler 


#7324 opened on Jul 21, 2016 by sebmarkbage 


About 


Discovery deliverables 


A declarative, efficient, and flexible Prototypes Time & Cost Estimation 
JavaScript library for building user 
interfaces. 


Product Requirements Document 


Architecture documentation Roadmap 


@ reactjs.org 
Timeline 


react javascript library ui 
2+ weeks 


frontend declarative 
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All documents in 
one software 


Generate all necessary documents for Business, HR, 
Finance, Medicine, IT, Legal, Education — using one 


cloud based software. 


Business Plan Business Model Canvas ean Lanvas 


SWOI Analysis Meeting Notes 


Medical Certificate 


Prescription 


Calm Landing page 


1 year, 12 montas ago 


Source 


Awards Footer Hero header Ratings Testimonials 
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Help Center > Integrations > CMS Integrations 


er 


The Complete JavaScript Course 2021: From 


Dashboard Word Press Zero to Expert! 
Campaign Bui der e 
l The modern JavaScript course for everyone! Master JavaScript with projects, 
Display Settings > 
challenges and theory. Many courses in one! 
Integrations v 


ASS 4,7 "RAS (99,122 ratings) 417,204 students 


ren Using Sleeknote with crested by 


CMS Integrations © Last updated 1/2021 ® English BB English, French [Auto], 5 more 


e Wordpress 


| Wishlist C2 | Share + | Gift this course 
FAOs > er AAA 


PandaDoc Why PondaDoc? ~ Solutions» Pricing Resources. Integrations Login Start free 14-day trial 


Search for items, brands and inspiration 


QSOS 


Newin Topman Clothing Shoes Accessories Trending now Activewear Face + Body Brands Outlet 


Concord School District of New 
Hampshire 


Home > Men > AToZOfBrands > The North Face 
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< Previous 1 2 ee 19 20 21 23 Next > 
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+ #1 Product of the day on Product Hunt + 


O) Favorited! Add to list 


C i rci e Pricing Login Get started 


The modern community _, Welcome aboard! 


Your GitHub account has been connected, and you're all set! Welcome 


platform for creators to CSS for JavaScript Developers. 


AUY 3 OF ANY TREATS A SAVF $% 0 SCOUNT IN CART 


IN a OA > Gap Gan A © NEW Free Next Day Product Pick-Up 


SAMPLES TRIAL ABOUT IELF ACCOUNT 


FIELDS 


Check out our feature on the news 


Meet Open Design - the first gateway to programmatically read design files LEARN MORE 


Ö avocode Product v Solutions v Learn r Blog Download Pricing (f Log in 


» 
u ES 7 tan 


Linear Release 2020.12 4 Series A 
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. US Bereits o l l l l | 
party. 20 100” Join millions getting more mindful 
party. GREENPEACE PORCELANOSA 


— — ena with Headspace 


Ao wartyos bouse 2 el them We We poy your catee monto oro wir 
ae i22 CORSO Ier one wes« GUE ana Cover TOA vw 2200998, PUTO, 
ne heedaye ana dependanta 
^ - LI , m 
100 million 10 years 
4.9 St 611.9K Rati 70M Download 
175 000 AMNESTY: A Times-ents nr expense repocts Nonelective TK: match Weeks paid parental inawa = ars = a Ings wn oa 5 
ui ^ LII ILI LITE hh cuo did aded o emm y precum Pi wn p Charge Saga Bpi m p > a 2 
rc in 14 miti ta cet crartor Average rating On ¡OS and Google Play Across all oi stforms 
ia d ‘ l work co^n and3pe ^c mon skemer account segandexs of ther and secondary arco a tb oec 
roca natty »^connb ALS. ~eets, Wo iro fectseil vosneed 
mer no 


L 


$10,000,000+ 9Ok 80%  45hrs 


Interviews in past year Candidate response rate Sourcing time saved per hire 


Annualized savings Ice 


1.5% 5.4 days/mo $100,000+ 12 minutes 


Cashback on averyihin; ma savings for finance learns wg. savings por eamprny. Oye. time lo roll out proġral 


Faster docs. Faster deals. 


Are you still manually building out sales documents, bogged down by 
inefficient processes and delays? PandaDoc helps you get documents out 
the door fast to keep deals moving. Notifications, on-the-fly editing, and 

eSignatures allow you to maintain momentum that closes deals fast. 


4,000+ hrs 1,5004 5 min sw. 


Time soent perfectirg cur Edqe cases In tia! set-up time a 
algorithms obliterated (seriously) : 


L > torta, and t Ji ‘ very edg« cose vcu cnn Pirk of . tene 2006, cumer The wor« 28 your er nis 1 fors to get 
alu fur pe fouls kalio n * Laer cam t you a leal npr 
70 6 8B OPB 99 99% decrease in time-ro-close closed deals per month decrease in document creation time 
. . o 
GUARANTEED UPT ME 


CITIES REQUESTS PER WEEK DATA S:FVEO 


05 GALLERY 


We built Circle for 
creators like you 


Communities àe the shelf life of independent onlne 
creators. They build connections among memners, 
enable profound experiences, ard empower vocal 
advocates, 


But after speaking to hundreds of creators, we 
ebserved them struggle with co opted products, 
stitch together sibos solutions, and wrestle with 

discussion boards that wert stale 


So, we built Circle: a community platform that 
integrates with your crestor stack and transforrrs 
your passive audience nto passicnate superfans for 
like 


Start your community today 
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no. rnsarrrarsrar 


mini 
ma 
list 


Ta- 
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ee 
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E 
— 
«t 
O 
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O 


Cres 


Three A 


Restaurant 


DISCOVER MORE 
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99,998 + 

On average we soend almost 12 hours 
ADDED SUGAR a week going throug 
inboxes! 


Added sugar consumption has been 


Sur email 


EI 


Scope of work u | 
linked to cognitive decline, cellular er 


aging, weight gain, and inflammation. 


Quiet your mind and 
calm the storm. 


Lightning fast delivery 


Try our 2-day service and get your shirts 
oy February 12 


Monthly Coffee 
Subscriptions 


Qs tery cof mc rra 
PRNL ro AAA MD ener TO 
di © a vir 


Consult 
$33M u 


Log in once, see everything 
Trackable revenue generated 


Schedule a consultation across our portfolio —Ó—€ 


Shop fy, and email marketing together. Drive 


one of our executive 
results with clear, actionable insights across 


desicn consultants to 


Subscri ptions platforms. 


Generale recurring revenue and build customer loyalty 
by selling subscriptions to your products on a weekly 
or monthly basis. 


Learn more + 
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My Invited Visitors —— 
s 
` LÀ . , a 
NU Membership communities 
ma We're Hiring fora Google 
Circle offers the flexibility to create a CI = oen lir 
= | Close to the metal - 
membership experience that's truly = , , , l 
Ea From direct integrations with @ mine 
yours. 
é — card networks and banks to 
= checkout flows in the browser, emm Ej 
Memberstack and Memberspace, Visitor Management every level of the financial stack. 
Circle can fit seamlessly into the rest Keep your oftice sate and secure. Allow visitors to check in, "oen 
: ] DA id print badg: Qu ftware als 
of your membership stack. hel SR OM RUM URS Ba 
Jister their quests FIND 
-xamples include... Fi 
ind and attract 
Leam More 
I-— candidates 


Exclusive memberships 


Fill your pipeline quickly with one-click job 
Communities for courses posting to 200+ sites, Al-powered sourcing, 


Premium masterminds employee referrals and more. 


Paid newsletters 


LEARN MORE > 


Conference communities ^ = > 
= G = =, 
Gets feedback from 
O y— v (9) 
al] = 3o ©) stakeholders. 
With Greenlight you can easily collate ne Design consultants 
8 different data visualizations feedback from those who matter on Our team can help you create your 
h the product version that your users BEN l , l 
a Secure including Kanban, calendar, timeline, is er mil dieel en FF&E specification, keeping it on time 


Safeguard your agreements Gantt, map, form, and workload and in budget. 
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FROM MYRDALSJOKULL 


ATV Black Beach Safari 
and the Plane Wreck 


Al-year 2 IS 131 


Daily Digest 


v**v50Ho0 


GR 
Magnesium 


* From Irish seawater 
e Includes /2 trace minerals 
eH gr solubi ity 


* Essential mineral for over 300 


$8 


Eco-Friendly Hemp Pet Collar | Dog Col... 
EUR 25.00 FREE shipping 


React Native for 
Designers Part 2 


12 videos - 3 hours 


& 
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Preview this course 


€12.99 €129.99 90% off 


Buy now a 


20-Day Money-Back Guarantee C » 


This course includes: 


- 
— " 
- 
- 


TA LI 


L] G8 hours on-demand video 
[3 20 articles 


m 18 downloacable resources 


PIADINA WITH 
co Full ifetime access BREADED CHICKEN, 
3 Access on mobile and TV TZATZIKI SAUCE AND 
SPINACH 


A Certificate of completion 
Apply Coupon JF ann ot 
(925 1717 Media 
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Simple fitness 
experience for 
everyone. 


En -- 


Q UIs © 401 © 36.5k 


911 


From $ 99,200* 


[2 Build Your Porsche > All Models 


EN Alex Strohl 


ClearVPN 
ITE SEA Multiplatform VPN Adventure Photography 
EXPLORER du 


€78.95 
— enea Made For 


MEDIUM 7-DAY TOUR 


Rising Photographers, Aspiring 
Exploring the jow-dropping US east coast by foot Buy Now Professionals 


| 1 
and by boat 


View More Options Experience 
9 TENIS - UMS 45 episodes in the studio and from 


the neld 


Get 


A New pel spective on Your career 


$497 per per 
DETAILS 
4.8 


Explore Workshop — 


Read more 


& D “Development is open to everyone.” 
Sergio, Claudio 


pip Claudio, Senior Developer born in “79, talks about 
December 15, 2020 


the importance of experience in software d... 
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Jonas Schmedtmann 
jonasschmedtmann 


Desioner. Developer. Online teacher. 
Edit profile 
Ar 6.7k followers - O following - 17 38 


©) Faro, Portugal 

fa hello@jonas.io 

@ jonas.io 

Y @jonasschmedtman 


Highlights 


ik Arctic Code Vault Contributor 


ġa André Jonas 


Hi 3j I'm André, a seasoned software 
engineer and former teacher working 
remotely from Portugal. | am a ceek, a 
problem solver, a communicator and 
forever a student. https://andrejonas.com/ 


WORK 
Senior Software Engineer 


LOCATION 
Silves, Portugal 


JOINED 
8/01/2021 


fursty © 


uh https://bitski.com/dropo06 
Ilo f 


1,544 


= à Following 
A 


Dan Abramov 


| didn't make : Please ask 
technical questions on GitHub issues 
rather than in mentions +» 


E] 
Jin 


« he/him 


288.2K 


& timbuktutravel.com . fiTirbuktuTravel- Timbuktu empowers curious travellers ta 
explore tar-Tlung corners of Africa, Design your own safari, we'll make it happen: 


3.5k followers : 1.5k following 
1m monthly views 
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Josh Pigford 


Founder 


© @shpigford 


Sandeep Acharya 
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FAQ Current Job Openings E All Dopestrrents . WHAT WE DO ($0 YOU DON'T HAVE TO) 
We know that you have a lot of questions, 01 Pr i n wor h ver im v 
we've tried to list the mast important ones Y Customer Success 6 Openings Y oject et worth over time 
Eng neering 15 Openings $ 
lumi E sid Mi 02 Incorporate the essential data A 
Finance 2 Openings v 


Absolutely We offer only one price: 79$ for a lifetime unlimited access (unlimited websites, unlimited domains, 


mirniisd ans ee Wr salida By using relevant third-party data, Path more accurately calculates tha 


cost of cach scenario you explore and its impact on your overall 
Legal Openings ^ 


finances. 
© Do ineedhow to code? > Head of Lagal Dap. Corporate / MEA EHER Remote P * US Cansus earnings growth data 
Legal Counsel - Comrrerdal —— * Bureau of Labor Statistics retirement spencing data 
l * Real-time property prices from Redfin 
Q Does Popkit will work with my website? > Senior Legal Counsal - Commercial EMEA, emote B « Freddie Mac mortcace data 
* Department of Education's projected college costs 
Marketing 1Openiyo X 
o Does Popkit affect Website Performance? > 
Sales Americas 4 Openings v 
"Nn " 03 Reflect your all-in costs v 
Sales APAC SUpenings v 
Q Can | use the Popkit widgets adapted to my language? > 
Sales EMEA S Openings 9 
Security & IT lOpenhg $ 


WHAT'S COVERED? 


Your personal belongings in your home v 
Waen they are damaged, destro ec or stolen 


O 


Your liability to other people ww 


Oecaupiers ana personal liability 


9 


Visitors’ possessions 


D Damage occurring at your home, provided they are no: insurec = 
elsewhere 
Money cover 

D Covers against loss or damage occurring at any ocation within the = 


United Kngeom 
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FAQs -- 
©) Multi-brand specialists Frequently Asked Questions 


O) Industry-leading repair-rate 


How can | get started? bd How much does Yotpo cost? 


Getting stared is casy! Request a demo to hear... Dur pricing plans are based on your business needs, Last year Greenbridge Technology repeired 26% of devices Is my data really secure? 
taking inte account your monthly order volume, 


sent to us by our customers. Our primary objective is to get 


traffic, products, and domains. Our plans are built te 


Which platforms does Yotpo y E = "s a eina dos customers' devices fixed and returned to them as quickly as is 

support? i possible. This industry-leading repair rate is the central pillar of How do you backup my data? ^ 

Yotpo integrates with world-leading eCommerce... Greenbridge's commitment to deliver large cost-savings to Craft has a data recovery plan. Our databases are always replicated synchronously, so a quick 
Does Yotpo support businesses ¥ our Clients, and to minimise the amount of electrical waste recovery can be executed at any time. As an extra precaution, a snapshot of the databases is 


with high order volumes? being generated from our claim flaws. Greenbridge taken daily, to allow recovery in extreme conditions. 


Is my data secured? Who owns the ~ 


content? MARE NND CH SIRE Technology delivers low average costs per claim for our 
Protecting our customers nformation and dala is.. Clients as well asa great environmental outcomes. 
Can | cancel my account at any time? Y 
Does Yotpo work with Google, 
Facebook & Instagram? 
v" ies Vetpo to my other Yorpn i5 an official marketing partner cf Facehook... (2 Best-in-class SLAs 
marketing tools? Can I change plans after | signed up? 
Absolutely! fou can integrate with the marketing... 
i 7 (c) Modern customer experience 
What kind of plans do you offer for 
small brands? What plan do | get with the free trial? w 


©) API and Integration Solutions 


Gur Growth plan, starting at $19, s perfect for sma... 


What happens after my trial is over? 


What are Contributors? 
What is a Product Admin? 
Rated 5.0 on Clutch E 9000+ stars on GitHub + 
94% employee retention = 15 years of cooperation + What is a Product Editor? 
rate on average 
Hapoy employees build 
happy so'Lwarg. Hire a team 100% affice-based team + What is a Feedback Manager? 


that cares about giving you 


stellar results. 


50+ successful projects + 
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Kindle E203 Paperback Other Sellers 


$37.09 $22.76 - $45.49 See all 2 versions Sales Marketing RevOps Customer Success 
Buy $37.09 
eBook features: "— E kd i i I sil 

"pis : Digital List Price: 459-99 reakdown organizational silos 
. Highlight, take notes, and search in the book Print List Price: $69-95 Save $32 30 (47%) 


* |n this edition, page numbers are just like the physical edition with a seamless workflow to 


* Length: 708 pages ~ produce faster sales cycles. 


* Enhanced Typesetting: Enabled ~ 


e Pege Flip: Enabled ~ | Send a free sample | 


Read with the free Kindle apps (available on iOS, Android, PC & Mac), Kindle E-readers and on Fire Learn more 
Tablet devices. See all supported devices ~ Deliver ta: — 
Sold by: Amazon.com Services LLC Your Kindle Library v 


| Give as a Gift | 


Enter a promotion code or Gift Card 


Pros Tools Marketing CRM & Sales Customer Service CMS 
LA 1 TM 
Quality assurance Onboarding Coaching and 1-1s Analytics & KPls Browser Extension C Marketing Hub 
Everything you naad to capture leads and tum tham into customers, Calculate your price „|, 
NEW: Only pay for marketing contacts. x 
Enjoy transparent pricing hy canosing tie contacts you pay 10 markat ro land store your noo-mareating contacta Tor frag, up to à Imit of 15 milian overall contare) 
Learn more $ 
see 
nd fare Starx w €44 Starte at #573 Sirris at 
Get your customer support u a Tem PU ` €41/mo KA €740/mo LN €2,944/mo 
reps u to S eed nn a t — ES eU Starter biled zt 6558 €497/W Professional pito a esses en.eamyr Enterprise billed at €35,328/w 
P E p - . ea Starts zt 1 CCU marketing contacts IŻ Stans at Z 000 marketing contacts 2 Starts zc 13 030 marketing contacts IŻ 
—— ee — = = f p es | 
E : -— EN us Pay Monthy (Pay Upthomt SAVE 0. D SP [Pay Upfront SAWL 10% | 
View real-time KPIs by agent to ensure consistent m " —- EE cUm 7 En c7 
ae = AAA. AAA. EA 
seren a Lammr- : Buy now Talk to Sales Talk to Sales 
and low-performers. Deliver transparent and - yn 
_ . KI - ww Y Dina a 
actionable feedback. With ongoing visibility into € 8 $ — — ec 
their performance, there are no surprises. le s : - a am 


| 
j 
3 
| 
L 
L 


Description Care Instructions Ingredients/ Materials End of Life 


This toothbrush is the perfect replacement for plastic toothbrushes. Our plant-based 
bamboo toothbrush is made completely from plants: soft bristles, smooth handle, 
wrapper and box. 


Fully compostable packaging. USDA Certified Biobased. Dimensions: Length is 7°, Width 
is 4" and the Height 1". Product of USA and China. 
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Plant-Based Protein 


2 Laser Beam Dedicated Team Applications for iOS and Android OS ge 


& 


e Custom Uls with complex animations and 


^ 


| EI Worthwhile Mobile 


transitions. Vitamins & Minerals 


Plant-Based Protein 


Soy pratein Isolate Is the only high auallty plant-based protein that contains all 
$ essential amino acids. These are the amina acids eur badias cannot produce 


~ e Augmented real ty apps with ARKit and ARCore. 
E Humane Blockchain 


e Applications for infographics and data 
and need to be consumed in the diet. In addition, it provides 2 smooth 
texture, optimal favor profile and added health benefits. Learn more. 


visualization. 
Ac Superstar AR AS Healthy Fats 


Learn more 
$2 Tsar VR 
Slower Digesting 


~ i l Carbs 
cb Daring Machine Learning 


ESO C ELA ECO ED 


Inspiring stories and mini-meditations delivered 


Deploy (9) dailv to help vou start vour morning right. 
4 
Scale Resize 
Quickly scale up, scale down, or migrate to different 
Store Droplet types to meet the demands of your 
customers. 
Secure 
Monitor a 
Ó 
Floating IPs 


Redirect network traffic between vour Droplets using 
a Floating IP. 
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“The amount of time I've been able to 
save with Airtable has been 
immeasurable, and the more we've 
worked with it, the more applications 
we've found. Now the first question | 
ask is: How do we Airtable this?" 


Rahul Kothari 


Senior Product Marketing Manager 


Jh Frame .io 


AMERICAN BREAD 


ma ai ma au a a a a n a T m n T a a T a T n T m n T n m Ta Ir " ro ( ke r b Ox 


For thosa who NEUE teste clan On DI od We have been able to make scaling the technical infrastructure of our 


snack, here is a range of “Stars and Stripes’ 

products, inspired by the Amencan tradition: E business cost effective and efficient. E 
from the hamburger, to the hot dog and the O hz — 

soft bread sandwich. the American range 

combines the f'avour of the classic torms ot USA Rick C'Toole 

bread, quick and easy to prepare with extreme Cn-faindes amd CTI 


FIND OUT MORE $ 


eoo 
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CoilBlogs ] 
66 99designs is a platform = 


with a good name and a Access a Il EH-- 

very good service... E = 
exclusive j —— 
content on m —————— 

book. Therefore, we entrusted this to experts 


* 
and ended up being very happy with the result.' ( Ol | Blo S 748) © Hunt Level Genes Basfinp Garden Mentewanta 
o 
4 ġà EH ----- 


where entrepreneurs can easily find the right 
design for their company. The book cover for us 


was a very important part of the success of the 


$ Discover 
What members are saving bolo sense ofS ad UK el 


66 


Discover 
| came to learn that the < fitt ; 
storyline in my head ... was - Q S 
holding me back. 
Mevty added 
Popası ETFs 
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“ hey.com is the most exciting app I've used in years. A complete rethinking of email, full 
of bold, brilliant ideas. Highly recommended. Not only for the product itself, but because 
its boldness will inspire you to question your assumptions and think differently.” 


ce Adrian Holovaty 


“| just got an early demo of Hey from @jasonfried. | can confirm this will be my new 
default email over Gmail... it's a beautiful rethinking of everything wrong with email . | 
can't wait for you all to play with it soon.” 


«S Kevin Rose 


“Let me tell va'll something: Hey is going to change the way we use email. Bye-bye 


y 


G żtiti 


"We are using Reply.io for aur cutbound 
sales campaigns and for this the solution 


is pretty great." 


Hannu Stewart 


Gmail. Helllooooo Hey.” 


o Kris, MBA 


Don't just take our word for it 


Sae what some of our 10.000+ users ecross the globe have to say 


G ttiti 


"Reply has allowed me to quickly set up 


cold outreach campaigns while running 


fast and easy tests on messaging." 


Brittney Barrett 


founder at Konmdı 


G titit 


“Reply io will take care of the weightlifting 


while you can focus on closing deals with 


your engaged praspects" 


Alessandra Rinaldi 


El 


| cance everything on my own 
schedule. From picking out interview 
time slots to selecting only the 


companies | want to interview with, 


this is what recruit ng should look like. 
Joseph 6. 

[41 

Findira a new job is tedious 

and stressful. Working wirn 

Hired meant multiple 


companies that were a good 


fit were looking to hire me 


Dipika M 


‘ve never felt «o taken care of by a 
recruiter in my life, Saying my Talent 


Advocate goes above and beyond is 


an understatement. She clearly loves 
what she does, and that devotion is 
absolutely contagious 

Jorge 5. 


kk 4 4. 


Long time user - back again! 


Infusionsoft / Keap is the most 


intuitive and customizab e 
solution for my... 


Michael Ferris 


Feb 18, 2021 


Leo is much more sophisticated than a 
simple news filtering tool. It's a true Al that 
uses machine learning and NLP to filter 
out the noise. 


Braintree 
i PayPal 


“rear 


kk ko 


If you are committed to your 
business Keap is the support 
system for you. 


The system is only limited by 
your commitment. The team and 
resources are there lo create 


the... 


David Radke 


Feb 18, 2021 


ee 


We call it our cheat code. To find 
qualified talent that’s looking ... 
half the battle is already won. 


Kyle Barbato 


Sr. Manager, Talent Acquisition, Braintree 


kk k 4! 


Keeping on task with Keap 


| like the fact that Keap is 
available on all of my devices and 
| can very quickly access my... 


Emily Rcgers 
Feb 03, 2021 


kk k 4 


| love Infusionsoft! 


What | like best is how easy it is 
use to use and how it integrates 
with other... 


User in Marketing and 
Advertising 


Jan 28, 2021 
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Q John Crain Y 
gary 


Have been trying out @ Tandem HG 
for video and screen share. Love nol 
having to keep track of zoom links :D 


o Avery Carter Q 


Our team has been using it for about 
2 months or so, and it has been a 
really nice way to start 
conversations 


Working remote, you find that there 
is this weird social awkwardness 
over starting calls or wanting a super 
Quick cal! with another teammate. 
Tandem has the best solution for 
that problem fram what I've seen 
thus far. 


The team works hard and cares a lot 


about customer feedback which is 
awesome. Keep it up! 


* kk 


FP javascript Joe Q 


Huge fan of Tandem so far! | think 
this is acing to take distributed teams 
to tne next level. 


What ! love about it: 

- intuitive 4 beautifully designed UI 

- simple + easy to use 

- instantly connect to team members 
via video or audio chat 

- inslantly share your screen 


| honestly [gel like this is gong to be 
a game-changer for working 
remotely. Excitec lo see tha future of 
Tandem! 


Nikema Prophet y 


“dev_nkema 


Tried out iż Tandem HQ today with 
@enigmaticsoulrg and loved it. Much 
better than a running zoom call for 
virtual Coworking. 


“Its true, the original Casper is a great 
value for the price. The cooling 
technology keeps me comfortable all 


night.” 


„ Nicole 
eV 
4 G y 


JASON $ 


pow loearsc 


Excited for Ihe @ Tandem HO crew! 
They cama by (@igmacasign a while 
back to show us what thay wara 
cooking up. Rad that it was inspired 
by, and designed using, Figma. As 
the manager of a semi-remote team 
anything 10 make remote work more 
enjoyable and productive is 48 5 


Kevin Hale & ef 


ikevesis 


Just tried Tandem and it's probably 
ene of the bast videp/seresnshare 
collaboration apps tor remote teams 
ve seen since Screenhero, So many 
eautitul litte details. tandem,chat 


Original Mattress 


Frem 3595 


From our clients 


«Pros with fresh ideas. This studio is able to make dig a products 
around people needs.» 


A Dav de Dattol 


«What makes this team great is how they're helping us in decision- 
maxing. We stopped talking about things cver and over and just 
focused on building the right product » 


G Kiste Bagrbop 


D —— «More is a warld-class team working at the intersection of 
technology, design and business. If you are expert in those areas, and 
obsessed with design, you can create beautiful things thal just work. 


That's wha: they co.» 


[icio hes been a huge tuccect On oar qu tor ecco? acora 
herra se + chas Students to nak cese tions in rea dime netten 
stream our far kesson videos. The Tido aap was cosy to 
bil ad ineo dem most molem chest peter In 
websfes. 


kiku 


cart Patronen 


Devir Shown 


Andrew Wolker 


| installed Fathom on my personal website 
yesterday, and wow, what a breath of tresh air. 
| love how simple it is, and for something like a 
blog it really gives you all the traffic metrics 
you could need. 


Joel Gascoigne, CEO of Buffer 


Fatham is the perfect orivacy-Dased Analytics 
solution far us. We can provide the metros 
that our clients need and reassure them that 
tner customers' data isn't being shared with 


aceless commanes 


Derren Pinder, owner of Vatu 


EÉ 


4 

switched to Fathom because it's an ethical 
analytics tool that | car trust with my data. 
The interface Is beautifully simple to use: it 
shows me everything | want te know about my 
site's performance, and nothing I don't! 


Għarb Marie, creative director of Corwertkit 


Developers are pretty tech-savvy people, and 
these days very prvacy-cautious—they 
understand how scripts follow you across the 
niernel, thal's why we choose Falhorn, 


because they don’t do that 


Oskar Krawczyk, cofounder of JSFiddle 


Thanks to Upflow, we are able to gain real-time 
visiblity into our customer debt and follow up 
on unpaid invoices if necessary. 


Eugenie Chaltlal, CEO úl Hich Fiare Agancy 


“Polly makes it easier for 


employees to share their voice.” 


Laura Zhang 


Sermo Andytica Manager, People 


Our members are so impressed. It's intuitive. Circle came at an absolutely crucial time for 


It's clean. It's distraction free. I'm so gad we the Makerpad community and has been 

made this decision. essential in allowing us to grow. The team are 
so responsive and the way they build is so 

2 eie — RR intuitive that the platform gets better every 


week. | recommend Circle to everyone 
looking at building a community. 


Ben Tossal! 
Founder B Makerpad 


Circle is going to fill the GIANT hole in 
between FB groups and Slack for virtually 
every kind of online community 


e Mur Wegen After playing with Circle for an afternaan | am 
—— seriously impressed. This is the app 
communities have baen waiting for. Coming 
to every podcast and channel creator in 3 2 


E 


you already hau a e, use z 
If you already have an audience, use a 6. Tyler Lastovich 


platform like Circle Creative + technical strategist 


|. David Spinks 


ounder B CMX 


While Lessonly's.software. 
is-exceptional, their people 
have taken this from a 

| business exchange to a 
partnership. 


M ans from Dia & Co. 


We've built three communities serving more 
than 1,500 students using the new Circle 


. Zoom hosts live calls 

« Teachable delivers curriculum 

u Circle combines ephemeral chat with 
permanent discussions 


These three ingredients + engaged instructor 
+ vibrant community = transformative 


learning experience, 


Gem Will Mannon 


u$ Course Manager © Forte Labs 


Entire community + forums load via pop-up 
on fcundersummit.co - so fancy, nice work 
Circle! 


Tyler Tringas 
Earnest Capital 
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f Shereen 
KA cox ox 


"Lugg is THE best! Solomon and Yuri were great! For my most recent purchase | coordinated a 
pickup elsewhere and drop off at my place. They were fast, efficient, friendly, and extremely 
helpful (I needed to move a piece of furniture to make some room for the item they picked up). 
They were in and out in 10 minutes! Thanks a ton!" 


Read more customer reviews —? 


. S Mi 
JI eng 
Overall, Statamic feels like a CMS of the future, whereas 


WordPress fecls like a CMS of 10 years ago. I'm sold $ 
can’t wait to use it for my other sites. 


Paul Jarvis 
Founder, Fathom Analytics 


Figma 


“Because communication is centralized, it 
saves us a ton of overhead.” 


Badrul Faroog £ Product Manager 


B Meet cur customers 4 


0] 


DocuSign 


iii. Skyscanner 


SCENTBIRD 


Coworking brands love Optix 


Discover why leading brands call Optix the best 


coworking management software 


KOUWORK 


Trusted by over 26,000 forward-thinking companies 


WA Mixmax 


v bacco 


Uber 


Lemonade 


(3 Rakuten Viber 


V Expedia 


Meet Our Customers > 


Trusted by 


Theorem o 


VEED.IO 


© grain 


» 


ATFIVAL 


y 


4 ZipRecruiter 


ANNA 


resume.io 
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See why over 100,000 teams choose monday.com 


Bg s». IDA 
hulu STUDIOS UNIVERSAL Fat Adobe (tatea 
LOREAL a Discovery &e s-ideezer 
Q) Drift Hilton | SGS ww TATASTEEL (®Bonusly TomTom 


Join 8000+ professionals and brands already using VisualEyes 


(QN airbnb Mail himo Ə Spotify BEA — Microsoft 


BECOME A MEMBER NOW > 
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Thousands ofteams already add more focus to their work with Slite. 


You're in good company 


A e . Y// . hu 
Trusted by leaders at some of the world’s most inspired organizations VANMOOF A airbnb WeTransfer & spotifv Ar e a= meer 
, 
x 
@ El um & $ 
amazon > ooornasH — ABInBev c3 Brex © gojek allbindls (2) Pinterest 
PROGRESSIVE PHILIPS &9 PLAID Rappi Pd PELOTON FOX Mercedes-Benz 
The best creators trust Frame.io (Ö)JLL =~ E) > Eon x5 Rakuten ® C) FIREEYE 
HEG From startups to Fortune 500s, the world's best teams use Retool to power their internal apps. Our customers 9 


Linked [ff] CONDE NAST P3 Lichtricks 


E accenture ciji 


Le 0 $ 6 i 


5 Stars 
Thumbtack 


Tū TechCrunch 


"Sit back while neglected 
bathrooms ere remade” 


startups C 


BUSINESS 
INSIDER 


"Not like your typicel 


generel contrector” 


Lamda a 
Evening 
standard 


Lee 


4.8 Stars 


Google 


FORTUNE 


"Technology driven home 
renovations” 


Featured in 


TL TechCrunch 


An 


4.7 Stars 


h houzz 


crunchbase 


"Handles the full remodel 


from start to finish” 


Forbes 


T kl 
WSJ 
'A San Francisco based 
home renovation startup' 


CITY MATTERS 
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Your closest people deserve the best 


Cocoon is a beautiful messaging app for sharing daily life with your 


closest groups. Private, permanent, and paid for by people instead 


of advertisers. 


"La N (^ a MI! 
ts fa e NI a ` 
t4 THETODAYSHOW N) S  APPOFTHEDAY Ñ% 
wf, NI «f, "T 
a, E 7m. rx 


WSJ Bloomberg Ehe New dork Cimes 


i 
Y y 
7 #1APPOFTHEDAY 5 
wh ys 
= P 


é Reuters MB 
s CNBC 


B COMPONENTS 


It's easy as I, 2, 5 


Clerksy can help use your unique business needs. Here's how: 


Any product, any website Save it to Clippings We'll source it for you 
Right-click on any image an any website Add details and select your project. The Request a quote on Clippings, and cur 
and click Save te project product will be added to the board. team will source it for you.* a e — Há 
Fill out a form and tell us Time it will take a Clerksy Take advantags or on 
— w l | —— | L what vou're looking for: rep to follow up: monthly plans starting at: 
| i 1» 5 minutes 24 hours ie / 
-— 2 >) Book Free Discovery Call 


taubjec: to projsst qualification, fees may apply 


A 5 o o o 9 


1. Pick a style 2. Pack your products 3. Download photos Solve a programming quiz Take the ooding ohallenge Regord a 3-minute video Reueive offers! 
(^16 min) (~40 min) (~6 min) (as long as you want) 
plates to find the best Schedule a free next day product pick-up Resized for feed, story or billboard - Simply 
visual match for your product. You can even and Isava the lag work to us. We'll taxt you hit download and shara instantly an your e- Take a role- specific quiz that will Because we value your skills, not We've recorded 3 simple questions Become visible to all companies and 
prove yaur knowledge. your CV. for you to answer. get matchec with the relevant ones. 


try a free sample photo if you're nat sure. ance your photos are ready! commerce store or social media. 


14 STEPS 


Three steps to a cleaner inbox 


Connect your accounts 


Wait a moment while we 


(on e find all your newsletters 
Start unsubscribing! | 


How to get started 


Get your Cail Membership 
tor $5 per month 


2 
Coil Browser Extension 


nstall the Coll Extension or 
the Puma Browser app Puma Browser 


oeg 


4 Gamicid ar ite 


& App Store 
© Log in to Coil and enjoy 
web monetized content and GET Ton 
> 
features across the internet. Ld Google Play 
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Your home-buying journey: DINE NU: 
= Q Request a lugg 
What's next & how Habito can help o 
Get = in princi | & Appstcre Br 
Get your mortgage in principle PP 


Use this to show estate agents you're 8 serious 


Find a property you like and make an offer 
When it's time to buy, you'll have to make an 
offer and negotiate on tne price 


(= 


Find a mortgage 
We'll find you the best deal out of 20,000 


mortgaces from 90 lenders 


Do the legal work & buying admin 


€» We pickup your items 


You'll need to hire 3 solicitor or conveyancer 
before you buy. Their job is to co all the lega 


work you need to buy 


o--0-—0- 00 


Exchange, complete & get the keys 


t's time to move in 


Em UN 


© We deliver into your home 
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Tell us more about your home and we'll let you Become a pa rtner Write to us 


Name 
know your earnings potential instantly -- 
Pluglin) and play with Frame.io. Full Name Wark Email 
Email Mae FIRST NAME "M i | 
Phone Number Company 
Add LAST NAME Company Size v Country v 
Phone 


Email Acdres aw can wa help? joptional) 


COMPANY NAME 


Company Name 


ne Op ina 


Send Message 


WEBSITE 


HOW WOULD VOU LIKE TO PARTNER? 


Role 


TJ Contact support 


NOTES 


Get mv instant estimate 


Question 


<> 


Select your question... 
EMAIL y q 


Tell us more—how can we help? 


REACH OUT 


Let's make a new project together. 


Hello! I'm and | work for . We d like to develop an application. You can reach 


me at to chat about it & schedule a call. Thank you Your email address EJ 


I've read the Terms af Use and User Agreement 


Submit > Send email 
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La Redesk 


| og | n NEW TO ASOS? ALREADY REGISTERED? 
Log in to Hired with... SIGN IN WITH EMAIL 
Want to see Circle in action? Y Welcome to Redesk! # T pasate 
G Google 

Watch an on-demand product walkthrough or Create your account 

live demo (your choice), and start your free 14- Email — a 
Email 

day trial. 
| 
992 nm ET 
Password 
Forgot password? 
OR 
New passward |] Remember me Don't know your password? SIGN IN WITH... 


G GOOGLE " APPLE 
Sign In 
fj FACEBOOK qg TWITTER 


ng I've read and accepted the Terms of Use and the 
Privac y Palic y of Redesk. 
Welcome back. 


NESS LABS Spi i. floumino: Let's sign in. Let's get started 
First off, what are your 
first names? 


mo eachal Makerpad QFORTE LABS 


Enter your email address 


First name 


And your password 


Partner's first name 


Signin 


"It was quick and easy to 
use Hitchd to give a gift 
for my sisters wedding. 
We can be confident that 
they will love what they 
receive!" 


— Kara M 


Apply Now 


lell us why you'd be good fit for the role. Please suggest things you'd like to fix or acd Eo our website, APIS, services, 


suppcrt channels, etc. 
Name 


Maximum cf 500 characters 


Add Resume 


Resume shouid be a PDF under 10M3. 


Optionally, include lirks to your social mec a profiles. 


| handle 


handle 


Places to stay Experiences 


Location Check in 


| Cata 


Where are you gaing: 


1 


+ 


TUN 
E Ln dis S 


Emai 


Ilic DU 


Online Experiences 


Check out 


Become ah 


First Name 


Email Address 


| am interested in... 
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Last Neme 


Yes, | want to stay up ta date an the latest in solar! Subscribe me to your newsletter. 


Anything else to add? 


Submit 


e Leads 


ashle y Ele learbit. cam 
dcanca Gdrift.com 
elena@tealium.com 
marc®salesforse.com 


payal@classpass.com 


Pay in instalments 

Bronding 

Merchant dashboard 
Reporting 

Purchase behaviour insights 
Gustomess stay an your site 


Accepted payment types 


Ashley Taylor 


= 
— 


David Cancel 


Elena Hill 


Marc Beniof 


Payal Kadakia 


v Yas 


vw Yours 


v Full 


Y Almajor cards und 
Agilal wallets 


O 


Clearbit Partnerships 
Drik CEO 

Tealium Digita Programs 
Salesforce CEO 


ClassPass 


Buy now, pay later providers 


The 


Limited 


Limited 


No 


Major cards and 
bank ococurks 


Fxec aive Chainman 


San Francisco, CA 


Boston, MA 


san Diego, CA 


kan Francisco, CA 


New Yor, NY 


Poyment Gatewoys 


Limited 


Limited 


No 


Varies usually most cords 
and dgilalwallets 


24.5 


5-7.5 


8-10.5 


11-13.5 


31-34" 


36"-38" 


397-41" 


42"-44" 


45"-48" 


os 


54"-58" 


26"-2B" 


29"-31" 


327-34" 


35"-37" 


33'—41" 


427-45" 


45"-49" 


327-34" 


35'-37" 


38"-42" 


41-43" 


44"—48" 


47"—43" 


50"-52" 
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al Security 


PASSWORD PROTECTION 
TIME LIMITS 

VIEW LIMITS 
DOMAIN-RESTRICTED ACCESS 


IDENTIFY VERIFICATION 


Up Everyday Accounts 


Your Up account is free for mest standarc use. Interest is charged in the 


event your Up acccunt becomes overdrawn. 


Monthly service foe 


33" Direct debits 


Online payments 


t Re 
Deposits ta Savers 
34" 
Domestic ATM withdrawels 
" 
34.5 Domestic ATM enquiry 
35.5" Internat onal transaction fees 
Internat onal ATM withdrawal 
36" 
Internat onal AIM enquiry 
37,5" 


Ouercramn interest rata 


Froo 


Free & unlimited 


Free & unlimited 


Free & unlimited 


Free at most major Bank ATMs 


Free at most major Bank ATMs 


0% 


Free at most major Bank ATMs 


Free at most major Bank ATMs 


11.23% p.a. 
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Personal Business 
db Xtrackers Euro STOXX 600 db Xtrackers Russell 2000 
Plus Family Professional Standard Advanced |  UCITSETF (Acc.) (XSXE) Plus only, ISA, 2 UCITS ETF (Acc.) (XRSG) Plus only, ISA, 
3 = " 4 Europsan sloc: marke: SIPP 1s US smal! companies SIPP 
Fer individuals For [armies For individuals For smaller learns For larger teams 
LSE GBP ETF LSE GBP ETF 
Try for free 
pr purchase now nr purchase now or purchase now . 
db Xtrackers Russell Midcap ECommerce L&G UCIT ETF 
€ UCITS ETF (Acc.) (XRSS) Plus only, ISA, (ECOG) Plus only, 
iam Medium US comp nies SIPP Ecommerce '»gis: cs ISA, 
Dropbox core features 
LSE GBP ETF SES (GBR CEE 
Storage qo 2 TB (2,000 GB) Share 2 TB (2 000 GB) 3 TB (3000 GB) 5 TB (5,000 GB) As much space as needed 
EMQO Emerging Markets Fidelity US Quality Income 
Users o immer Up to B users 1 user 3+ Users 3+ wenn Internet & Ecommerce UCITS UCITS ETF GBP Inc (FUSI) Plus only, ISA, 
ETF - Accumulating (GBP) Plus only, ISA, US Dual ey lacaria SIP 
Exst-in-class sync technology ©) Y Y Y Y Y (EMQP) SIPP [SR Gie ETR Frama 
FM iriamar tameanias 
Integrated desktop exparianca U) v + v y v 
LSE GBP ETF 
Anytime, anywhere access Q Y + Y v v 
Computer backup O y v v v Y First Trust Cloud Computing First Trust US Equity Income 
UCITS ETF Class A USD UCITS ETF (UINC) Plus oniy, ISA, 
Easy and secure sharing O af + < Y Y owes Accumulation (GBP) (FSKY) Pius only, feed G""" NASDAQ dividend etucks SIPP 
F rms in the cloud spann LSE age ETF Finance 
256-br: AES and SSL/TLS 
encryption 9 v Y - Y Y LSE GBP ETF 
Gold Bullion Securities ETC HSBC FTSE 100 UCITS ETF 
(GBP) (GBSS) GIA, Plus, ISA, D (HUKX) Plus only, ISA, 
Gold SIPP UM large cap stoces SIPP 
LSE GBP ETF LSE GBP ETF 
Status Exchange Sector IPO Price No of Shares IPO Date 
AmariHoma Inc AHM Filed iu NYSF Finance $16 14,7M 
App: ovin Rumour Frcertainmert 
Ascensus Rumo re Finance Memary vCPUs Transfer 55D $/HR $/MO 
Butterfiy Natwork SPAC BFLY. Filed d NYSE Healthcare AGA 2vCPU ¿TR 25GR 0.089 $62 Sign un 
Calibar Home Loans, Inc. HOMS Filed ib NYSE Properties $14 23M 16GB 4vCPUs 5IB 50GB $0179 $120 Sign up 
Colnbase Filed di Finance ¿46B 1EvCPUs 718 20063 30,714 $480 Sign up 
l 12868 324C9US STB 400GB $1429 $950 Siar u 
Coupang CPNG Filed) NASDAQ Tech 7 y l — 
16063 40vCPUs 9TB 50063 $1.786 $1200 Sign up 
Coursera Rumour Tech 
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SAVE SM 
vC a em — 


Save up to 24% with annual plans TEAM BUSINESS ENTERPRISE 


Modern wervice ded Unmpany-wide elution wit advanced Tuton analytics wed sinoor 
kr madi Eustvesies wurkflows er «d adriniviza lor th tired far pour bus rana 


Detaded price comparison 


MOST POPULAR 


Free eSign Essentials Business Enterprise 
Upload, send for eSignature and Creote docs with templotes or the Comeci your CRM and automate For teams that require more $ 3 $ 5 $ 8 


€ € collect payment for as many built-in editor. Collect eSignotures your document workflows from apabilites including integrations 
A documents as you'd like and track docs in real-time too creotion 10 eS natura ke Salesforce and API 
er Free $19 $49 Let's talk 


Yınat you get for it: 


nat you get for it What you co” forit 
© max. 35 agents Create a free acceunt Start a free trial Start a free trial mm Teen pler, plus Bailara ple, piu: 
"max 3 agum Unite "eins ; 


Q trai support (BX3, CET) 


Get started 


Email support (£x$. CET] O Chewele: E-Mall, Meh Form, SMR, Phone support (Bf. CET) , 
Channels: E-Mail, Web “orm, SMS Chor, Telegram Email support (24»7) mae len dans Zus siete pla ie 
" nited le the Free plan features n n usiness plan . Ad l : A 
Sardırc Features: Tox! modues Q Stardard Features: Text modules, Channels: E-Mail, Web Form, SNS ou - Wed d dm P fons al pe inca leat vor 4 i : y e elea 
macros, ve lteimgumbierr ticket macros, mitiinguaben, ticket Chat, Taħaġram Twitter, Tacasenk binding « ynorures pus varures plus: eotures plus . l : 
histery, trigger, ccoduiesc history, trigger, schedulers, st rest ' l = A "ww us 
business hours, branding stincara hestires: Ter medales e Unlimited document © emplotes o CRM integrations [/] 550 support and 
business hero, bandeg m macres, multilinguaism, ticket uploads cn HART votes * Irtegratedknemiedge base + Advance w leaming with a 
& 10 MBatiachments + 10 GB disk Q Service Level Agreervents (LA) history. triager schedulers. © Rich media drag and © Content library : l MA 
space O intivisizzi mice iniivirkia toket business tours, branding O Payments drop document editor O Unlimited number of è Matire 7 Mero u , mationd laequaqe suy 
Oma comer in Germany, $51 objets service Leve Agreemerrs (SLAS) © Custom branding team workspaces ea pore assict * Advance vend t 1 
encryption, device management O Kaowld ze Base (menslingsal) Pocfiviclival olas, individua tieka O Mobile app © Piecing sables o Approval workflows [^] | e an — — 
DU We JW Salesforce imtearabon | D ' M 
e 25 GO disk objecte O Document analytics e e l ^ 
opare Knowledge Ease multilisg sal) © Zapier integration" O User performance and ; 
a 15927001 -cortified Bepeoctieng E content reporting 0 . 
Forms 
Q Data corner In German, 351 5OMB attackererts + 50 OB disk O api + HRS is 
ala A space O Bulk send ġ 
ORTON -cortitied z 
Dura cevier in Gerreany. SSL « Advanced asc 1 
Start free enerypiinn demon nanngeman! 
24/7 email and chat support on all paid plans 
Sesi chsce Feature Comparison 
aka F N 
€ 89.00 € 249.00 € 979.00 
ESSENTIAL PRO PREMIUM FEATURES FREE UNUMITED 


Qet a J ferent perspective auch! Le. as brainstonn w d a Dean Gel adeanced research around We mudts 


kom the 2 01100 sessions 


sO mo s 19 ¡mo $0 '5 


= One creative person bramsteems + A teem ot? creatve people 
Ne Credit Card Required — No Rick amine veas ipa hrairsry ma zr am your iiaa + Ateam of 2 creative preple 
e Documents hrainmamas amund yous concep 
© Recent rate ou cepls / aululions + Civeus any 2 upural yuu word. 
«v Documears ss Pages Fer Document or ene concrete concept wth the l a Gire usay ides ycc werd SEE : ! 
esplanarinn + Cet multiple eclutions / ideas with "oa O GET STARTED GET STARTED 
1 Fage Per Docu rent Document Maregement Fu detailed ox ;rzton * Get multiple solvtions / ideas wich 
. MFA Alan detailed explanation 


Document Management * Ore nook dehvorv 


Hems Managemen: 


« One week dolrvey 


items Management Without Watermark « Cormpedsen report® ? 1 T ma rem 
Include Fastdok \Vatermark Pricrity Support « Porradial customer maach’ e a Elo Storage Ualimited Valimi 
* Makei sae vabalinn Tasks and Praec. Unlimimd unimant 
Get Stated « SWOT Aralyam* Workspace N t Unlimited Vaimtod 
4 Get aurbrainstorming season nolea Lana ra le MVITT) LA aus Nh walmart 


* perio depends n gang MWorkupece and “ct bor Unhewted Vaimtaj 
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Standard 
$8 


sign up 


Quip Starter Quip Plus 


Loiskoracho poderoso pors sow pe cu peque Flasafonme de prod vided: gut perm er.ipes 


e CIN Er or ec de 1 
$10 =: $25 i 
— 


€ Documentos skola " dem Q Todos os recurscs do 2tirter, mois 
* Chater gup 'menzagorr 1pa 1 = imoc ie 5 
Y acesco strands de PC not o tlo nóni w £Piorparralo antia 


X lin Anas pr aliaogw 


Mirta ep ia 


$ para os 
once 
CULLE 


usarios 


Try it free for 7 days 


Trere's zero cost to get inthe product and set things up. 
Once you're ready to start sharing your lin«s 


shart your ana wnk Pre trial 


12: s 20: 


Lrlmitad Schedules Linka weyahing © Basis, plus 


Unlimited Calescars Removso e SwvyCa brand 


Urämnreu Eve on -cheduling links 


Salesforce Anywhere 
avancado 


Ales * coleboracha em tenzo res sie sicece 


m eq.ioes de vendes e ots 
Latrar «m conato com setor de rundes 


Q Todos o» recuraco de Plus, mais 


raren 


* id 
so 


ta' u no dran nos MO 
adore 


What's your current MRR 


$500,000 


O 


7") 
s 
B 
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Annual - first 14 days 
free 


€4.83/month, billed annually 
at €57.99 


Monthly - first 7 days 
free 


€12.99/month 


utàmotica ly reams mach yenar 


Try it for free 


Your price 


$ 5 00 /month 
START A FREE 14 DAY TRIAL 


Need a bicger plan? We've got you covered. We'll 


personally help you get onboarded, too. Contact 


“S 


e 


Sign In 


Sign in with your Sketch Account to access Cloud. Or, if you'd like 


ta manage your license, sign in to the License Manager 


Sign in to Cloud 


Sign in to License Manager 


Design Faster. Collaborate Better. 


experience. Mockplus does it z 


LJ 
Psa 


Interactive Painless Scalable desian 
prototyping collaboration systems 


Get Started far Free 


Log in to Blinkist 


| @ Continue with Apple 


Forgot your password? 


You don't have an account? 


Personal 


ount 
wing and over 


itected by tl 
te are protects 
JO per person 


k transfers 
UK hank for fr 


ng money 
om your balèn: 


iupport 
you need it 


lions 
nd how you sp 


oogle Pay 
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Accounts | er Savings Borrowing 


Compare all features 


Every feature, listed. Find the right account for you. 


Feature Monzo Plus Premium 
A UK current account y Y Y 
Your money is Y Y Y 


protected by the FSCS 


Get paid early Y v^ 

Salary Sorter Y Y 

Fee-free UK bank Y e Y 
translers 

Pots for separating Y Y Y 
maney 

Award-winning Y Y v 
support 

Instant notifications Y v^ 

Apple Pay and Google w Y e 
Pay 

Spending categories Y Y w 
Fee-free withdrawals £200 £400 £600 
abroad 

Other accounts, in Y Y 


Y 15% off Patch and mary more 


qay Fee-free withdrawals abroad 


= lin ta FANN tee ewer AN dave 


Features Hel 


to Manzo Prem 


surance 
‘5. damage, the 


ie travel insu 
fou and your fa 


ən balance ar 
9% AER/Gress 


ed airport loı 
Jeets can trave 


withdrawals 
0 every 30 day: 


sh deposits 2 


ats across the | 


13 MODAL WINDOWS 


H A PUP ABOVE 
"m weet fee? . I1 at 


SAVE 10% OFF 
YOUR FIRST ORDER 


fail wagi qudranterd. 


aca ora] eem i pee sithi goo a caer. 
cer Wer 


y ATA «cà ignes 12 20009 AI 
Bop hy STOP to ag re acris. Mog € dada ortos rmp apph ew car arrtiot Series be detel» 


ms 


saħna Jot TRE" Ee d 
Subscribe! C5 7:4 
O e 
Sizn up to the Rino&Pelle newsletter to cet 
aone time 10% discount on ycuraéxt .-—— ~ 
ordar and receive the latestnawsancut! -*, j) 
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BUILDING AN ACCORDION 
COMPONENT - PART 2 


HTML 


.accordion { 


} 


display: flex; 
gap: 24px; 
flex-direction: column; 


CROSS AXIS 


MAIN AXIS 


WITH FLEX-DIRECTION SET 
TO COLUMN: 


< align-itens aligns items 
horizontally, no longer vertically 


< justify-content aligns items 
vertically, no longer horizontally 


< gap acts like margin-bottom, 
no longer like margin-right 
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LECTURE 


BUILDING A CAROUSEL 
COMPONENT - PART 2 


HTML 


.btn--left 4 
position: absolute; 
top: 50%; 
transform: translate(0, -50%); 


top: 5096 l 


= 50% of parent container’s height 


transform: translate(0, -50%) 


= 50% of actual element’s height 
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.carousel { 
position: relative; 
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Ignoring the X 
(horizontal) value 
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LAYOUT PATTERNS 


HTML CSS 


Q ROM 


Text 

Buttons 
Images 

Input elements 
Tags 


O 0 4090 hO09NM-2 


Breadcrumbs 

Pagination 

Alert and status bars 
Statistics 

Gallery 

Feature box 

Preview and profile cards 
Accordion 

Tabs 


10. Carousel 

11. Customer testimonials 
12. Customer logos 
13. Featured-in logos 
14. Steps 

15. Forms 

16. Tables 

17. Pricing table 
18. Modal wingows 


This lecture 


1. 
2. 
8: 
A. 
3). 
6. 
7. 
8. 


Navigation 

Hero section 

Footer 

Call-to-action section 
Feature row 


Row of boxes or cards 
Grid of boxes or cards 
Z-pattern 

F-Pattern 
Single-column 

Sidebar 
Multi-column/magazine 


Asymmetry/Experimental 


Mode lle 
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(2 ISO 27001 
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security compliance 
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Microsoft 365 Office 


PCs & Devices 


Computers 
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Buy 


Support 
Business 
Microsoft Azure 
Microsoft Dynamacs 365 
Mieresatt 365 
Microsoft industry 
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Microsoft Advertising 
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Shop Business 
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Support 
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Visual Studio 


Windows Server 


Windows Dav Center 


oa 
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Our people 
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are your people 


toolkit 
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Download the guide 
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Design Systems Collaboration 
4L Customer Experience Overview Professional Services Training Customer Service 
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Our Projects 
Solar energy savings, no roof 


homes. businesses, & towns dt 


ys CleanShot X Changeson 
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Capture your Mac's 
screen like a pro. 
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b How it works 
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wi: the macos too. It works exactly how | need It to. 


Daniel Zarick, Arrows.to 


S 

Beyond eSignature: 

. 
Document automation 

> 

for fast-moving teams 
Improve your document workflow to allow 
for increased productivity and to deliver 
an amazing experience for your 
customers. 


Start free 14-day trial Request a demo 
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FAQ 


Contact us 
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Le we Me Alon e Learn more ~ Pricing Log in Start unsubscribing $ 


| a,» 
Easily unsubscribe 
from unwanted emails 


See all of your newsletters in one olace and 


Black Friday Cact... 


unsubscribe from them with e single click. 


Try mel 20) 


Start unsubscribing for free > 
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"37,967 people like 1 n haws 


FSTA4AMPANY maker 


unsuoascr Dec From a total of 541116 emails 


The modern 
way to build 
for the web 


Webflow empowers designers to build 
professional, custom websites in a 


completely visual canvas with no ccde. 


Get started its free 


zendesk Rakuten DAL 


V HELLOSIGN Petal 


We Lattice 


Upwork getaround 
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All-in-one 
employee financial 
wellness platform 


Dedicated financial experts, an app to guide and track your 


A 


Bathroom 
renovations, 
Made easy. 


progiess, and automation that optimally moves money lo 


implement your plan. 


We combine premium design, materials, 
and construction for an all-in-one, 
renovation experience. 


Book a Free Consultation > 


Let us guide a full spectrum of your employees' financial 
and life situations. Help employees budget. save, pay off 
debt, invest, and create a smart firancial plan fortoday and 


the future 


Get in touch 
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Build Ore Suture ma. 
E. 


"m The centralized solution 


The only all-in-one — armen Atl 
analytics tool for hug: to manage and distribute 
digital content 


ki 
email newsletters 
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Get started for free > 
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Book a demo Free 30-day trial 
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JOIN MINDFUL MONDAY 


tema SUBSCRIBE 


Get started with PandaDoc today 


Would you like to see Narrative 


jif wo require 
LJ LI 
BI IN action En ii ere = 
a> vpn OOO 
wo ee" 
PR le y 
ma > 
` 


Leave your email address to discuss how 


your company can get first actionable 
insights today 


Get started with Trendmo for free Your wark amail Get started 


Oatlm ze your marketing warkflow with Trendmo, Start analyzing actlonabia, 


compersble insights across socis! medis, email marketing, ecommerca, paid sus, Fran 14 riny trial F Mo cradit card reairg r Cancel nt ary fine 
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Sourced Locally, 
Made Fresh, 
Delivered to You. 


Starting at $7.49 per serving 


Our real, whole ingredients come from local suppliers who 


share our values. Meals are cooked to order in our USDA 


No commitment. Skipping or canceling meals is easy. 


CHOOSE YOUR PLAN 


certified kitchen just days before arriving at your door. 


GET 20% OFF NOW 


Start protecting your website visitors' 


Ready to find your B 
privacv todav, for free 


next home? 


We have homes in 124 cities across tha 
country to choose from 


Start your search 


Fathom is simple yet powerful website analytics. Our pricing starts at 
$14/month for 100,000 page views and you can cancel anytime. 


Get started for free View a live demo 
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Free until you're 
ready to launch p en 


Build your site for free and take as long as you need. 

(That's right, no trial here.) Just add a site plan for more 

pages, and a custom domain when you're ready for the Upwork getaround x. PACIFICLIFE Petal 
world. 


Get started — it's free 
Y HELLOSIGN mDDODOS IDEO 


Get it done faster 


Don't hesitate, we have a 30-day money-back guarantee. 


Buy for $29 


Buy now Upgrade license 


v One-time purchase “ Cloud account included 
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Renovating is hard, 
we've got your back. 


You're on the way to the easiest renovation ever. 


Book a Free Consultation + 


x d 


Email Us Call Us 
concierge@maderenovation.com (888) 560-1069 
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Where to find us 


Our nationwide network covers many locations, 
and we’d love to talk with you about a home built 
around you. 


View Locations 


Call Us 


0800 456 456 


y Ready to create a unique experience”? 
Let's get in touch! 


TALK 
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, . 
È Our Story We're with you 
[à " BORGIR UO ITO. PANTO Once you have your tailored plan, we'll help you stick with it. 
^ delareriadraiar lle ci Track your supplements, learn about how they work, and got 
| — nd-made with care, packed wit! new recommendations as your health changes, all in our handy 
mind I JICNG Pm 
- pev FE app. 


Say hello to your new healthy habit. 


Take the quiz 


Dina gets business through her 
online shop 


Strive to be 4 14 DAMOS 
" love using Typeform because | don't nave to go 
back and forth via email to give geople an estimate. 
It's a simple intraduction to my process that helps 


my business run smoothly.” 


Read more + 
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Unlimited products 


Add and manage products with an easy-to-use 
interface that scales with you and gives you 
complete control over how products are 


Amplify other channels 


arranged. 


Using Hustle doesn't mean overhauling your entire 
communications strategy. Instead, it makes people 
more receptive to other channels, Text to schedule a 
call and they're more likely to pick up. Alertthem to 


Rich product listings 


Give shoppers the best browsing experience 
with rich product descriptions, embedded 


A 2 videos, images, related products, and more. 
an incoming email and tney're more likely to open it 


Product catalogs 


Show products organized by category and help 
customers find exactly what they're looking for 
with intuitive menus. 


a i l ii Contribution. £250 Simple. 
0 DT Gw TM Enjov vour trip and 
— thank guests 01. Make a logo in minutes 


Thank you eo much ter tha generous «rt! 


Here is à proto from our boum on came back ir 


g Menshach. it was 100% the highlight hames Once funded, it's time to start your adventure together. Share Forget looking generic! Looka'a software is powered by Al to 


your gratitude and experience by sending a personalized thank crasta a logo that matches your vision — no design skills 
you message to contributors. Include a photo from your trip to 


— add a personal touch. 


Start your adventure 


MI cur lowe. r m . 
required. Generate endless options. and twesk dasigns to get 


exactly what you want. 
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a & Messenger &) Mon 09:41 AM 


We design great user ES | Quick Access 
interfaces that empower e ir J ... 


i d d : | A Our overlay makes sharing a breeze. Instantly save, 
peop e an rıve value CN ny] ` copy or drag & drop screenshots or screen 
Nel em f i > recordings to other apps. Whatever your workflow 
We know what makes interfaces grea . SeAaAMiess 
l > ge looks like, it's going to fit. 
Journeys. Our team merges expertise in CX, UX, and U l DF al +, is going 
P qu WA ee" 
design to craft seamless processes and products. e la t b Watch the video 
2 
Even when users interact with your product across 4 
devices, applications, and (real-warld) touchpoints. 
ps du P The essential swiss army knife for screenshots, © 
That's how we empower people and drive value markups, and GIFs. Every Mac owner needs this. 
Tyler Tringas, Founder at Earnest Capital 
Making complex applications seemingly simple is a 
what we da bast Pp" o 
oy 
fa Robin Humphreya <> 
t 
ized. Sh 
Stay organized. Show up 
prepared Sat uum Uns 24/7 customer support 
Our team is here to provide you with personalized and 
Sales Team Updates 
a outstanding service. We also offer a range of self-learning 


Agenda templates and timely reminders help you 
build better meeting habits without much effort. tools in our support center: 


© Knowledge base B Daily webinars B Community 


BE For the meeting itself — the actual oomph is in the notes. It's an 


alignment moment even before the meeting starts À 
b asha Gideon 

€ 

q Verrah 


Vis tour support center > 
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> Solar Development 


e PRIVATE This board is currently private 
We work at the forefront of responsible solar PRIVACY CONTROLS 


development. Partner with us to develop innovative 


utility-scale solar. Sha re pu blicly or 
Copy & share this link privately 


hrpslusabalr lar. 29110 . l 
Create public or private boarcs to control who you 


share your designs with. 


Learn More 


Invite via email IM 
Private boards are invite-only in order to keep your 


designs private. Public boards allow you to share your 
designs with anyone, using a simple link 


Érter “heir ar 


& Developers and Property Owners > Invites sent: 


tMerdamientdamad.com 
Leorn how our experienced team con deliver 


lucitrompsarifacoday com 
solutions that let you maximize the value of 
> 


your land. 


4 Hi Sam. welcome to Vorost ow Banking! I'm Mia, your 
personal oarkir g assistant, | can velo you with th ^gs 
libe transfering funds, o- checking account balances. 

You've been invited to have a 


conversation with Banking Bot 


PROTOTYPING & USER TESTING 

= . 
Lightning fast " 
prototyping — 


Wal can | Ie p you walls Loc ay? 


TRENDMO FOR TEAMS 


d licet send money rc Katie 


Seamless client and team DG Brian Gritfith 
member management 


Streamline your workflow with flexible team permissions, and Voiceflows advanced prototyping 


- Trained SR 29% 
customize access levels across clients and collaborators. Share capabilities allow for robust testing D untrained 27.18% 
actionable insights with marketing, sales, or product teams in just a few right in-browser, or on-device. 
clicks. Gabby Moreno Account Ma Assistant model has changec. We hig 
nsf W E n a ' 


Why teams love Trendmo » 


Train Assistant KI Q 
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Accelerate every stage of the deal cycle 
with PandaDoc 


Proposole Quotes Contracte eS gnotures 

Simplify the procesa to Create interactiva, error Create controcta fast Cave time end koco Collect payments wth 

rrenta propasala fran quotes wih pre-cppiover (decis rroving with soncruras ta ger pod ir 
templates eSignalures os little os two days 


Quiet your mind and Ease your pain and Sleep tight and wake 
calm the storm. soothe your joints. up refreshed. 


Consult Match Collaborate 


^ 
- 


, A P e» 


mr ; HUM E A E 


de NEWTOUR Ex > e Get creative Find a perfect Easily edit and Repurpose 
Em "As ges video video for your publish your and promote 
E tar] . . 
" ENS | ha marketing story videos 
FROM MYRDALS.OKULL ALPINE SK: TOURING i i 


FROM SOLHEIMAJOKULL 


ATV Black Beach Safari id Oa Always have ‘resh clips, images, and music easy and powerful video 


The Volcano Ski Touring 


^ i . rh the built-in editor. Add your une your video 
. . . art icr - content to past an social or search the bui 
and the Plane Wreck Glacier Discovery Challenge media and beyond with stock library with 300 message and logo. appearance with the 
the Wave. video free million assets customizable player 
AJ -vear cans | L |130 | All-yeer — l-dhrz rines |Mey- June c 36 dss E social calendar 


Leam more -> Learn more + Learn more > „sam more => 
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Y. 


Deploy and share securely 


Retool comes with the security, reliability, and permissioning built in Contact sales > 


Learn more aboul enterprise features 


.. R le aes History 


Eco-Frierd y C Dog Collar | Dog Coll... Eco-Frie E g Di ka Eco-Friendly Hemp Doc Harness |Pe:5.. Eco-Frieroly Hemp Fat Col ar | Dog Col... 


EUR 2700 HE shipping EUR 15.00 FR EUR 40.00 FREE shipping EUR 25.00 FREE shipping 


heroku legin ee hiling-yr 


git cli 
cd rere " " 4 . 
heroku gib:renole -a YOUH_ME@OKU_SPe_ NAME Add query2 (SQL query! aglect 13, se Opportunity al Only 3 left 4 peosie rave th s in their cart 9 peop e have this in ther cart 
A + relet Tel Clakwfate From y 
comm d j-empiv <0 | RBedecloy ng StegeNare = ‘Closed Won'ard 
push seror r Renamed query Sto luis been, invoiced c = Tulse xl 
TT . Itat Nete like SIWEDIFV 
Host remise Revision history via Git 
You ca t Retool on-premises, behind y | VPN, and in your Sync Retool apps to a Git repository, so you can manage Retool apps ; ES | 1 d — i ) 
own VP splov via Docker or Kubernetes. as code. Oh, and choose what version ts deployed in a nice GUI. $ 4 $ Uu a » be à; rem = 
4 " e A m FP — f 1 E - 
Depiay R lan-pram in 5 minutes 4 Set up Ratoal Git syncing + f. K a 
SN A 
EcorFrierd y kemp Pet Leash | Pet Leas.. Eco-Friendly Cork Dog Calar | Deg Coll... Eco-Friendly Cork Dog Collar | Black Do... Blue Dog Col ar | Eco-Friendly Hemp Pe... 
EUR 30.00 FREE shipping EUR 22.00 FREE shipping EUR 22.00 FREE shipping EUR 25.00 FREE shipping 
ok pplication i Only 2 lett 
Google APIs 
© Postgres resource naton d -— 
Customer datanase 
(tomer success l f Team database = Hetool 
+ ^ wv Oktavertied ~ SAMIL ~ Pr nlials a BOR, 
Di hs if Y 
=a Tr 4 O 
ned access controls £ audit logs SAMLSSO and 2FA 
Granularly control what users can access which apps and which Sign in with the services you already use, including Google, Okta, 
resources. And efter they use the apps, query what they did via the Active Directory Federation Services, and other SAML based identity Reach cur award-winning support Sleep soundly g your data is 
audit logs. (Which you cen then build Retool apps atop of.) providers. Import groups and use them insice of Retool, team in about 25 seconds by always safe arid always accessib e. 
hon ha We're ISO-certified, 
Control user permissions + How to set up SAML + pnone or cnet ee ISO-certifie 


Expert advice 


Keep things moving from enywhere Make the r ght moves with help Get up and running in days, not 


with our top-rated mobile hirng from 1000s of hiring templates and months — Workable is just that 


app. tutorials easy to use. 
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My Invited Visitors Ez Tickets l 
pet ten) B r “Common 
: - — mA 
ar Purchase a 
- gift card for 
= the holidays Howe this clutch! It's classy, well made, 
= ; size for smell outings 
[rz] mi 
e 
= 
Sr 
Visilir Ma : ħ - 
Modern Ticketing Dominique Jackson Erin Carey 
esp SUR, AN o COCR I0; Make service requests easier lo send and track. With Eden Content Market WW Ha ppress 
sign 5, and print badge Cur software also Workplace, employees can file tickets for al! of their neecs and PR o Bdithewrlter o @butterednap 
help save time by allow loyees to H H exantd taċ Ta 2 a crear } 
— vidil edet farei dd jin workplace managers can organize and handle tickets in one Gift cards Reviews o 
heir quests 


place 


Gift cards are an ea 
products with Iheir 


y for customers lo share your 


Squarespace makes it easy ta build customer trust 
ily and friends. 


through product reviews. Options range from simple 
ML review boxes to directly embedding customers’ 
ews from Facebook. 


Learn More 


Change HVAC Filter o 
York 


in 5 minutes 


Ventura 


Milk Dip € ‘astayran Monthly Coffee 


Subseriptions 


Fried Filler Josh Pigford Martin Rariga Pieter Beulque 
aum Backend Founder Dasigr Frontend 
- Ps red fil er fshpigford gnartinrariga (mpieter beuque 
chedulin iliti © Orea i PSNPIJJTONI E nrang WPIBLEr DOU Ue 
S g Facilities Manage are 
3 stress-free with Ecen Workplace's room Manage your property efficiently work crders 
ware. Book conference rooms, check in and out . . . . . 
and customized notifications. Track reps aintenance Social integrations Subscri ptions 
"i Mau in E nr SO nes VOUT NODI GATES And Een yOu Easily share your products ta Facebook, Twitter, and Generale recurring revenue and build customer loyalty 
and S + " 
a Pinterest, and tag products in vour Instagram posts. by selling subscriptions to your products on a weekly 


or monthly basis. 
Leam More Learn More 
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Feature row section component Feature row section component 


Trust our team of Keep your team in the loop 
experts to deliver 


Keep your sales and finance teams on the same Re: 1st reminder : overdue invoices $3,649.00 


page by giving them an overview of their 


E u Hey Ben, I did receive your voice, is iL okay to pay on 
m i m "'enaivahle the 3781 of Decem ber 7 
= Zg Design consultants pi One point of contact " receivables. ee 
| Our team can help you create your You Wave one pont or contact — us a f EEE EEE EEE EEE EEE A A A AN il Reyards, 
[| SERE sreciticatian, keeping tan time Wel handie every suppiar acd all E N P" u Charkes 
E and © budget e èdmin Bi E (++) d- m" 
oO O E p a " 
u u m " 
m 5) Installation w; Consolidated delivery El H Internal communication Assignments a ES @Marie can you handle this? 
: AUFS esa don TICUOEN ————Á——— T m £Use comments to keep Bring the right team u 
assembly, positioning, Saga ing and Lonllars and deliver when gurad = ^ ense Pakar a 4 ; 
" EEG ' aw L gaing an ) t ju - m" others up to date on the members into the loop when = (3) alBenjamin sure, MI check wilh "imence. 
ICH G IG emovs u 
u m g account needed m 
FEE BB BBB BRP BRP RPP Ree EEE EEE EEE 5 5" mi = 
a : $8,849.00 
BERBER RRB RBBB RP RRR eee eee A” (4) 


Grid pattern 


Row pattern 


Feature row section . 
Š Feature row section component 


-— 


OUR MISSION 


Get the help you need, | 
every step of the way m We help SMEs to create JA 


EEEEEEBEEEBEBEEBE EB BEE BEE aa aa aa aa aa > 
; : empowering workplaces for 
a Shopify support Shopify App Store a t h e 
E. xb = 4 ME —— eir teams. 
- Contact suppart 24/7 whether youre Add features and functionality to a < 3 F BHEHHEHHEHEHHEHHEHHEHHEHHEHHHHHNEHHEHEEHNENH / 
m" troubleshonting issues or looking for your business with 6,000+ apps that Ba i = u j 
business advice integrate directly with Shopif; ' El ! 
= ae orum f = = 9,000 small businesses 200k employees are d | u 
> LJ LJ LJ LJ ' 
m Contact support > Visit the Shopify App Store > = cmt : and counting. actively using Swingvy. = 
m a " - 
PLC E El 

= = 

—— | m m 
MC nenne le "uli „ 94% of customers are 90% of customers told = 
= ee Tu : m likely to recommend us switching to Swingvy „ 

re a Shopify expert ta heln you a . . 
a with everything from store setup to 8B — a Swingvy. Is easy. : 
E SEO E is = x 
m ` 

: 5 =) PERU UBB RRR RRR e 
= Explore the Shopify Experts Marketplace — = e 
: - Grid pattern x 
SEES EEE EEE EEE SEE EEE EEE EEE EEE SEN BEENDEN 


Grid pattern 


D PATTERNS 


ġ ve v 


We're not about Quick Access 


pseudoscience and half- Cur ovaray makes sharing a breeze 
h copy o" drag $ crop scraensno's ¢ 
truths 


nstantly save, 


recordings to other apps. V 


loo< Ihe, Us 
i oer ISV ĠIE studied Jiet: und 
cy ra tr ems we med > Watch the vdeo 


The som Pol «aie army inse 
marbupr, and Cite. very Moc ow 


brome 113 tet 


M Ativitamin tar Wo 


Automated triggers 


Automatically trigger any function to run when a new deploy 


a new form submission 


succeeds, a user authenticates 


wo. 
e 


Annota 
You deserve t 


n 
LI " : In e matter of secen portant paris ol Third-party APIs 

We shove seunes, stakes, amy our wulleriamın e . e spom oo! Loved by 

Mote ita hat wach vti G ni tion } a sanitize ser data befor ending 
: A rote" waht ply chide 5 Li e A chived Quf ters, 1 Deals any dher anactatian apa Set up Tunctions to ia sanitize user date before sendi q 
Lirk 

Toth on to third-party 3 s to process 

Whe We Are n (a) 4 f A B DD à 2 © % and combine API services in nev 
Moot Cuir pro det 


Check out some examples > 
Our Clin «al Study 


authentication 


Instead of managing sessions c ver, use Javascript Web 


Clean and simple, delivered "— hm datedi 


Lam tovto Ea can2«d On toi of soc atiots and CleanShot Clo 


ruit i ior al expert ore UB U mw be Lam ear new wily 


Priel años ¿pal Upload your captures tc 


irsiamtiv get a shareable Ink 


Citivery due @ Unload & oet alirk in a single dick 


Free and car cancellction 


p] Denvwersina with arivanced leamos c 


Mb Ja money leek xam vri ex 


Wale MOORE 
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= Just send a link 


==> and et others take 
it from there 


Searching for locations 


- 


ncrease Convers nns by connecting customers with nearby places and | i 


l ġ 
nas 


FEEDBACK Sarah Peters 19m ago 


Can we change the typeface to Lato? 1 


Collect feedback with o also preter this color: #2F 3663. 


Search and ge 


Flaxinla and a'tordab 


tan le with hi i i $ N li k Mark Complete 2 reolies 
4 
occ i one Clic 
EUN restaurant 
A Sha ^ € 
i TI Share your genera 
9 bagin collecting $ 
Click on a design to leave ck and keep all Reece Olatunji zn 
your feedback in one place. ^ ro confusion These aren't cuite aligned. Let's align e 
and no more endless emails them witn the section below. 
Mark Complete 
On the way toa 
reasa echi-innry and impro R A r 
acking and live ETAS 
Fuerything you omed to build delivery, curbsire 


PIC «sp, Dder-anel,a d location sherini 


ETA 
A minutes 
ħ Br 7» Review anc discuss 
f " changes inone place @> private This board is currently private 
an Mos + 
Copy & share this link 
In a location rol who you 
nere engagement with ncatan-basmi content and messaging] : snare your designs wi 


Invite via email 
Private boards are invite-only in order to keep your 
— ES designs private. Public boards allow you to share your 


Geofencing — designs with anyone, using a simple link 


" Invites sent: 
pport For nlin 
tvlerdamien@gmad.com 


lucgthompsonibworedav com 


McReae’s 
We carve to Mebruders! Your 
o de le ede 


r+» oes 
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fill la Digestive Enzymes 


us biological catalysts ta breuk 


ales. They arc [ound n harnuns 
body, they're naturally produced nthe © b d AN 
/ gasorcintestinal tract und used Lo breuk down [rod 


j Automate tracking with GitHub, 
Gitlab and Sentry 


ention-grabbing resume with f 


uz & cipest einer proteins, lals, una cu 


plants, animals, and fung. In the urna” 


TEMBER 18, 2028 ( Learn More ) 


J nical resume to land an interview at 
Webflow 


Probiotics 


e ccdy. sre m croscopic livirig 


f A organisms intended lo berelil cur heal improving or reslöring Ihe gul lora. 
/ p 
020 N \ While Ihe use o! proziol cs lor purpurled nealth benefis is lar [ror mew -daling 
baz« lo Ruman Cres! - lher use is increasingly semg s-udied lor pulertisl 
\ / beneits such ss prevenling inleg L tat Lhe ir sys l y 
2 H enert JEĦ s3 prevyen liny irilecluers, VOUS LIT he mure systern, rera: n nk Preview and ambed full Figma 
t i 
An interview with 4 Webflow managers \ / adita. Mu a ee 
( Learn Mare ) 


Transitioning into tech 


J Ar probiotics. They supper. the growl 
\ of heul y and ber eficial bacieria in the gul and hem con ead to cura He cha FE Get updates and create issues with 
Slack 


in tbe overall function of the gut microbial osm munity 


Webflow code Challenge: a prep guide 


NL għ ( Learn More ) 
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* 


B oxi 


Quick Collaboration 
See which work aups your team is working in, enc 
jain therm with s chek. Shares cursors = belle 


soraan sharing 


* Keun A Azura 


w Lisa IB tree 


8 Watt [Soto 


@ lucy Y Irei 


Alar joined you in | 
Vistar Cooke U mom 


X Viatar Cooler y 


Spontaneous Convers s 


A bles A kun 


True zones gol you working ale? See who is also n 
work mode ard qat quick teamnack on your wark 


* [mul El 2D: 


2 Daly Standup T 


3 Feedback Mecded < 


And Renn 


Co-working 


Hang out in a minimal yecevdes call to fan 
connected — Ike you're working at the seme table 


a Dmitry Yaryginin The Shadow 


Two reasons why l am skipping $ 
Macs 


And why you should think twice betore buying Apple hardware 


Feh?7 - 7 minread : Fopularan Medium % L) ... 


How to Make 
Badass Shad 4s 


£^ Buninux in Prototypr 


How to Make Badass Shadow 


Tips to help create better UI shacows. 


Feb 26 : 2minread : Based on your reacıng history 


m Sean Kernan n Mind Cafe 


Five Signs of a Highly Intellige cor 


aluable life skil 


L) ... 


Accurately sizing up someone's mental acuity ist 


Mar? - 5mnread - Popu ar en Medium * 


= Mohammad Faisalin Better Programming 


The 7 Traits of a Rock Star Rea ¡CODE 
Habits that make the difference 


Mara * 4 min mead * Based on your reading history * 


Natasha 


Rashid 


Aj ah 
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» Texts 


One inbox. 


All your messages. 


Sigo up with Goegle 


n een 


Borda do 
L 


f ma 


(A ssum ħmara 5 


Allinone. 


Irat Iove ‘aLe rd: 


Tezt» hax ir^sgeetinos tas dl nan jor nae apes pleticrra inca Se; Message Dln hbm], Aat Apo, higan 39374 F7 
Mies pm Tort m, bem om Lib ds mu) Peres u 


Privacy first 


NES NEC WOR O9 BL TR SORE OO. IO TC DIT Oft CF v) 9 Oe VEN. morae nyrey mmy erm 


von s amity atop er 


Archive. Snooze. Mark as unread. 


dear ee a Cane again. ardid cala o his iaa 


na Um mer. e yu Laos ve 


Send later. 


ro deep chert «ead by dete a sou reapand to ter. race peaphe that 


A Pay get end gf ecprecrece bine! wean cecple on ete 


Search all messages. 


Al fat frd, docwren; por or doe tron &e ever 232 aniy 


Customizable. 


m Ye caza C6feama HEEE Tes mde ba be 


hee bec u DOA ficos) Yo 

less thon ceven hrs bl c been Ie 2 kusfaq 
M my nem eg eng innen vw 

mad: $ oth. id careo "satur, vip us 
lef erm) artem ow 


I 
es Wie APEE “ATTTER Gest 
x Nts 


&: a havi 


MA DOĊOSS v pro NS. 04 
rice! baccilisc ir | hove the feature ahere 
oa imma uni yous sch y 


wir 


A LART POR INCA 


INGA- 
SAURUS 


BOOK 


Inga lowes dinotaun, she has ¿ big collection cf them, 
but Inga also has an extremety rare heart defect and 
needs a Me saving operation urgenty 


To heip nasa moreg A - Għal ordy place i Uu rd 
pertermenz ICH upecaliat "ear! A a 
ac 9-9 


We PEDIA ard BATEA eom A Ul ACIDO AA o Dota 
CFT) ED a i da id 


Hor dıncı zur because there 
are 10 mary of hem, you can 
learn ahma a new new everyting 
But also becasue they are big and 
teary BAWD 


inga 5 years eld 


A wet fer boo 
Marti nece. nga, fei an arome tom of Chater) nora, à rave eat ddect. 
Ad Pop pen Ded vw a herr Me Petr 


nee nn ur 


Tha pers og amiable of the Brian Anomaly Center in Pel jeudi 
Saat. ta feum Vegan PEA Pasta. Her array reed to "e (230 600 ta t 
eris vf Maech 2021 b fund mwa Mer traptement und gha Inge te Devt 
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SECTION 


OMNIFOOD PROJECT — SETUP 
AND DESKTOP VERSION 


THE 7 STEPS IO A GREAT 
WEBSITE 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


a DEFINE THE PROJECT 


f 


Define WHO the website is for. Is it for vourself7 For a client of 
your agency or your freelancing business? 


Define WHAT the website is for. In other words, define business 
and user goals of your website project (Y See lecture on UX) 


Business goal example: Selling premium dog food 
User goal example: Finding high-quality dog food for good price 
Define a target audience. Be really specific if possible and if it 


makes sense for your website (this can come from your client) 


Example: “Women, 20 to 40 years old, living in Europe, earning 
over 2000€/month, with a passion for dogs” 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


2 PLAN THE PROJECT 


f 


f 


Plan and gather website content: copv (text), images, videos etc. 


Content is usually provided by the client, but you also can help 
them produce and find some content (simply finding free images 
is easiest, but if they want copy, charge them extra) 


For bigger sites, plan out the sitemap: what pages the site needs, 
and how they are related to one another (content hierarchy) 


Based on the content, plan what sections each page needs in 
order to convey the content's message, and in which order 


Define the website personality (<j See web design section) 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


3 SKETCH LAYOUT AND COMPONENT IDEAS 


f 


Think about what components vou need, and how vou can use 
them in lavout patterns ( Get inspiration in web design section) 


Get ideas out of vour head: sketch them with pen and paper or 
with some design software (e.g. Figma $$) 


This is an iterative process: experiment with different 
components and lavouts, until vou arrive at a first good solution 


Vou don't need to sketch evervthing, and don't make it perfect. 
At some point, you’re ready to jump into HTML and CSS 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


a DESIGN AND BUILD WEBSITE 


S- Use decisions, content and sketches from Steps 1, 2 and 3 to 
design and build the website with HTML and CSS (“designing in 
the browser”) 


< You already have the layout and components that you selected in 
Step 3. In this step, you need to design the actual visual styles 


Z- Create the design based on selected website personality, the 
design guidelines | showed you, and inspiration (<j See web 
design section) 


& Use the client's branding (it if exists already) for design decisions 
whenever possible: colors, typography, icons, etc. 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


5 TEST AND OPTIMIZE 


& Make sure website works well in all major browsers (Chrome, 
Firefox, Safari, Edge, maybe even old IE 692) 


< Test the website on actual mobile devices, not just in DevTools 


Z- Optimize all images, in terms of dimensions and file size (Y See 
lecture on images) 


& Fix simple accessibility problems (e.g. color contrast issues) 


¿+ Run the Lighthouse performance test in Chrome DevTools and try 
to fix reported issues 


+ Think about Search Engine Optimization (SEO) 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


LE LAUNCH THE MASTERPIECE f 


Z- Once all work is done, everything is perfect, and you got approval 
from your client (or yourself 69), it's time to share your 
masterpiece with the world! 


«< Upload your website files to a hosting platform. There are 
countless platform, we will use one with a free plan (Netlify de) 


© Choose and buy a great domain name, one that represents the 
brand well, is memorable and easy to write 


DEFINE 


PLAN 


SKETCH 


DESIGN AND BUILD 


TEST AND OPTIMIZE 


LAUNCH 


MAINTAIN AND UPDATE 


a MAINTAIN AND KEEP UPDATING WEBSITE 


f 


f 


Launching is not the end... 


Keep the website content updated over time. If you're working 
with a client, you can create a monthly maintenance contract 
(recurring revenue $) 


Install analvtics software (e.g. Google Analvtics or Fathom) to get 
statistics about website users. This mav inform future changes in 
the site structure and content. 


A blog that is updated regularly is a good way to keep users 
coming back, and is also good for SEO. 


IN 


JONAS.IO 


SEHMEDIMANN 


SECTION 
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AND DESKTOP VERSION 


LECTURE 


DEFINING AND PLANNING THE 
PROJECT (STEPS 1 AND 2) 


HTML 


< Your first “job”! 


< You were hired to design and build 
a website for a fictional company 
called Omnifood 


© Omnifood is startup that uses Al to 
create and deliver custom healthy 
meal plans 


< They provided us with all the content 
for the website (content.md) 


< Define WHO the website is for 


For a client 


< Define WHAT the website is for 


Business goal: Selling monthly food subscription 


User goal: Eating well effortlessly, without spending a 


lot of time and money 


Z- Define target audience 


Busy people who like technology, are interested in a 


healthy diet, and have a well-paying job 


From provided content file: 


“We are a technology company first, but with a major 
focus on consumer well-being through a healthy diet. 
Most people are very busy with their jobs, family and 
friends, and other important activities, which doesn't 


leave much time for cooking. This might lead to a poor 


diet and lasting health consequences. We want to 


solve this problem by using aniAl-centric approach. 


Users can use our app to select their diet and foods 
they like and dislike, and oul Al algorithm Wil create a 
custom and individual weekly meal plan. But we don't 
stop there. We partner with restaurants and other 
cooking partners to actually cook and deliver all meals 
from the generated meal plans, in selected cities. All 
this will be packed up in a monthly subscription, 


where users can choose between receiving one or 


two meals per day, every single day of the month.” 


Plan and gather website content 
© Plan out the sitemap 


We will just build a one-page marketing website 
(oftentimes called a landing page), so no sitemap 


< Define website personality 


Based on the tech-centered target audience, as well as 
the actual product being sold, we will use the startup/ 
upbeat personality. We might add some elements of the 
calm/peaceful personality, since the product is all about 
consumer well-being as well 


Z- Plan page sections 4 


From provided content file: 


"We are a technology company first, but with a major 


focus on consumer well-being through a healthy diet. 


Most people are very busy with their jobs, family and 
friends, and other important activities, which doesn't 
leave much time for cooking. This might lead to a poor 
diet and lasting health consequences. We want to 
solve this problem by using an Al-centric approach. 
Users can use our app to select their diet and foods 
they like and dislike, and our Al algorithm will create a 
custom and individual weekly meal plan. But we don't 
stop there. We partner with restaurants and other 
cooking partners to actually cook and deliver all meals 
from the generated meal plans, in selected cities. All 
this will be packed up in a monthly subscription, 
where users can choose between receiving one or 


two meals per day, every single day of the month." 
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OMNIFOOD PROJECT — SETUP 
AND DESKTOP VERSION 


LECTURE 


SKETCHING INITIAL LAYOUT 
IDEAS (STEP 3) 


HTML 


0404040444404 


Logo + Navigation 
Hero 

Featured in 

How it works 

Meals (and list of diets) 
Testimonials + gallery 
Pricing + features 

CTA 


Footer 


| installed Fathom on my personal website 
yestercay, and wow, what a breath of fresh air. 
| love how simple it Is, and for something like a 
blog it really gives you all the traffic metrics 
you could need. 


Joel Gascoigne, CEO of Buffer 


Fathom is the perfect arivacy-oased Analytics 
solution far us. We can provide the metrics 
that our clients need and reassure them that 
their customers! data isn't being shared with 


aceless companies 


Derren Pinder, owner of Vatu 
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switched to Fathom because it's an ethical 
analytics tool that | car trust with my data. 
The interface Is beautifully simple to use: it 
shows me everything | want to know about my 
site's performance, and nothing I don't! 


Charli Marie, creative director of CorvertKit 


» 


Developers are pretty tech-savvy people, and 
these days very privacy-cautiaus-they 
understand how scripts follow you across the 
niernel, that's why we choose Fathom, 


because they don't do that 


Oskar Krawczyk, cofounder of JSFiddle 
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AND DESKTOP VERSION 


LECTURE 
RESPONSIVE DESIGN PRINCIPLES 


HTML ESS 


< Design technique to make a webpage adjust its layout and visual style to 
any possible screen size (window or viewport size) 


< In practice, this means that responsive design makes websites usable on 
all devices, such as desktop computers, tablets, and mobile phones. 


< It's a set of practices, not a separate technology. It's all just CSS! 


DMNIFOON = an = UMNIF CO 9 Mewitwerks Meet Toakirsaniels Pricing OMNIFCOD How it wiesa EI AA Pica 
A healthy meal A healthy meal delivered to your door, 
every single day 
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2 CT -— every single day every single day 
jared ow your oisesconal Lares and BELEG er ne The smart *65-days-oer-vea- food subscr = das cia 


Fart orng well Learn mere 1 


ESO DC Or creada 
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personal tastes mc nctritionmal neis 
Ue 
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"TE TechCrunch ; The New Merk Eimes Forbes Wusarovav 


VIEWPORT 
WIDTH 


FLUID LAYOUTS 


< To allow webpage to adapt to the current 
viewport width (or even height) 


& Use % (or vh / vw) unit instead of px for elements 
that should adapt to viewport (usually layout) 


& Use max-width instead of width 


FLEXIBLE IMAGES 


< By default, images don't scale automatically as 


we change the viewport, so we need to fix that 


< Always use % for image dimensions, together 
with the max-width property 


RESPONSIVE UNITS 


Use rem unit instead of px for most lengths 


< To make it easy to scale the entire layout down 
(or up) automatically 


< Helpful trick: setting 1rem to 10px for easy 
calculations 


MEDIA QUERIES 


© Bring responsive sites to life! 


& To change CSS styles on certain viewport 
widths (called breakpoints) 


NL- We will learn how to use media 


queries and how to select 
breakpoints in the next section 


Z- Start writing CSS for the desktop: large screen 


< Then, media queries shrink design to smaller 
screens. 


OMNIFCOD 


A healthy meal 


A healthy meal 
delivered to your door, 


every single day 


Z- Start writing CSS for mobile devices: small screen Ne 
l l l We will do desktop- 
& Then, media queries expand design to a large first in this project. 
screen It's easier to learn! 


© Forces us to reduce websites and apps to the 
absolute essentials. 
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Beyond eSignature: 
Document automation 
for fast-moving teams 


Improve your document workflow to allow 
for increased productiviry and to deliver 
an amazing experience for your 
customers. 


Start free 14-day trial Request a demo 


ei" nar ag qa 


Le ve Me Alone Learn more ~ Pricing Log in Start unsubscribing > 


l 0.9 
1 


Easily unsubscribe 
from unwanted emails O ae eee 


See all of your newsletters in one olace and 
unsubscribe from them with e single click. 
Try me! 


Start unsubscribing for free > 


6366-308 QU 


mir 37,967 people like you wan hav 


abe Dec! from a total of Se Su 5 PSTGMPANY maker 
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Any product, any website 
Right-click on any image on any website 


and click Save to project 


ee 


Langen Design Festiv 
4 r 


GET A QUOTE 


Save it to Clippings 
Add details and select your project. The 


product will 5a added to the board. 


lt A " 
pr kar ha ra 


- — 
A AS 


Get started with 


Cover today. 


We'll source it for you 


Request a quote on Clippings, and nur 


team will source it for you.* 


Quick Access 


Cur overay makes sharing a breeze. Instantly save 
Copy 0” drag & Crop scraensro's or screen 
recordings to other apps. Whatever your workilow 


loo<s Ike, t's going te fit 


> Watch the video 


The pauertiat swine rey inde lg «ovens © 


mrarbupe, and Cite. rey Mac owner neede thir 


Tpe' ringas, 'ouncer MANE! Capea En 


t Deo //AW00260 


Annotate 


In e matter of sesends hightght important parts of 


q your screenshot with our annotation coo! Loved by 
Actived nur uners, 1 heals any other anactation apo 
Tosh 


n(a)o "^ va 100000373 


f Fra Ciud nn he 


CleanShot Cloud 


Upload your captures to cu” blazing-tast Cloud and 


instantly get a shareable Ink 


@ Unload & cet alirk in a single dick 


QQ Benwereinn with artvanced feas sose 


YN JONAS.IO 


SECTION 


OMNIFOOD PROJECT — SETUP 
AND DESKTOP VERSION 


LECTURE 


BUILDING THE FEATURED-IN 
SECTION 


HTML 


Logo + Navigation 


Hero 


Featured in 


Q 5 


How it works 

Meals (and list of diets) 
Testimonials 4 gallerv 
Pricing 4 features 


CTA 


EM 


Footer 


Featured in 


startups (4 Eins | "Tm TechCrunch Forbes CITY MATTERS 


“Netflix for food" "Making lunch meetings 


"Digitising the lunch 
y healthier” 
experience 


IN 


JONAS.IO 


SEHMEDIMANN 


SECTION 


OMNIFOOD PROJECT — SETUP 
AND DESKTOP VERSION 


LECTURE 


BUILDING THE MEALS SECTION - 
PART 1 


HTML ESS 


Preview this course 


€12.99 «2399 90% off 


(9 5 hours left at this price! 


36-Day Money-Back Guerantee 


This course includes: 

Lf) 68 hours on-demand video 
f) 20 articles 

[ 18 downloadable resources 
co Full ifetime access 

3 Access on mobile and TV 


RA Certificate of completion 


Apply Coupon 


Magnesium 


The Dream Weaver 


* From Irish seawater 

* includes /2 trace minerals 

* High solubility 

* Essential mineral for over 300 


reactions in the bodv 


$8 Add 


.meal-attributes 4 


} 


display: flex; 
gap: 2rem; 
flex-direction: column; 


CROSS AXIS 


MAIN AXIS 


WITH FLEX-DIRECTION SET 
TO COLUMN: 


< align-itens aligns items 
horizontally, no longer vertically 


< justify-content aligns items 
vertically, no longer horizontally 


< gap acts like margin-bottom, 
no longer like margin-right 
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TESTIMONIALS | 


| installed Fathom on my personal website 
yesterday, and wow, what a breath of tresh air. 
| love how simple it is, and for something like a 
blog it really gives you all the traffic metrics 


you could need. 


Joel Gascoigne, CEO of Buffer 


solution for us. We can provide the metrics 
that our clients need and reassure them that 
their customers’ data isn't being shared with 


aceless comparnes 


Derren Pinder, owner of Vatu 


a 


switched to Fathom because it's an ethical 
analytics tool that | car trust with my data. 
The interface is beautifully simple to use: It 
shows me everything | want to know about my 
site's performance, and nothing I don't! 


Charli Marie, creative director of Corwertkit 


Developers are pretty tech-savvy people, and 


these days very pr vacy-cautiaus-they 
understand how scripts follow you across the 
niernel, that's why we choose Fathom, 


vecause they don’t do that 


Oskar Krawczyk, cofounder of JSFiddle 
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FREE PRO 


$ O /mo $19 mo 


No Credit Card Required — Mo Risk 
« Documents 


w Documents «€ Pages Per Document 


1 Page Per Document Document Management 


Document Management Items Management 


4^ Items Management Without Waterrnark 


Include Fastdok Watermark Priority Support 


Get Started Get Started 


Ġ Q g 


Tech that keeps you safe Humans on hand Strong privacy 


We support face & fingerprint ID, and Our customer support team is ready tc We never share your data with amy 


use 256-bit TLS ancryotion. help you, 7 days a week other parties without your consent. 
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Get started with Sketch today 


Turn your ideas into incredible products with a 30-day trial. 


— Support 


aa ali 


Iry for Free 


Write to us 
Full Name Work Email 
Phone Number Company 
Company Size v Country v 


How can we help? (optional) 


Send Message 
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Y VisualEyes 


Copyright © 2020 Loceye 


w B 8 s 


VisualEyes 


Create Account 
Lag In 
Fricing 


Status 


Company 


About 
Community 
Contact 


Leam 


Tools & Resources 


Above the fold plugin 
Blog 
Remote Eye-Tracking 


Use Cases 


Policy 


Privacy 


Security 
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Maximum width at which media query still applies N 


(media (max-width: 600px) (media (max-width: 1200px) 


< 'Iswidth <= 600px ?” < "Is width <= 1200px ?” 


"i 


< Code outside of 
any media query 


Opx 
: 600px 1200px OO 
400px 1000px 
NL- Example: At a viewport NL- Example: At a viewport width 
width of 400px, CSS in of 1000px, CSS from the 


both media queries applies 1200px media queries applies 
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Ahealthy meal 
delivered to your door, 
every single day 


algete IAS raus davosi iow waa 


Based on popular devices 


Based on screen width ranges 


When design breaks down 


300px - 500px 600px - 900px 900px - 1100px 


A healthy meal 
delivered to your door, 
every single day 


etta tonnu + 


600px 900px 1200px 
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(D (D (D (D 
(D (D (D (D 
i I i= i 
O Q Q O 
E O o 5: 
Q = E Q 
b ® ® b 
Q Q Q Q 


THE END! 


